jquery - 接受jquery输入焦点/选择/模糊的回车键的最佳方法？

Question

以下 jsfiddle ... http://jsfiddle.net/mqVUU/ ... 是一个简单的输入字段 UI 调整。目标是：

• 聚焦，放大输入（通过动画）
• 在焦点上，选择当前输入内容
• 在输入中按下“输入”时，模糊输入
• 在模糊时，缩小输入

这是到目前为止的脚本...

$('input').on({
    focus: function(){
        $(this).animate({'width':200}, 300, 'easeInOutBack');
        $(this).select();
    },
    keydown: function(e){
        if (e.keyCode == 13) {
            $(this).blur();
        }
    },
    blur: function(){
        $(this).animate({ 'width':100}, 300, 'easeInOutBack');
        $('#result').html( $(this).val() );
    }
});

任何人都可以帮助解决这些问题...

1. 如果我把它放在animate()回调中，那么在动画发生时用户输入的任何内容都会被覆盖，这是有问题的。那么让select()工作正常的最佳方法是什么？
2. 参数真的是keydown唯一接受enter作为触发器的方法吗？

感谢您的任何指点:)

Answer 1

1）在动画完成时插入选择：

$(this).animate({'width':200}, 300, 'easeInOutBack', function(){
    $(this).select();
});

2）如果你想模糊输入 - 是的。

Answer 2

在 webkit 浏览器（Chrome 和 Safari）中，简单的 .select() 并不总是有效，因为 mouseup 的默认操作是清除选择。所以你需要添加这个处理程序：

mouseup: function(e) {
           e.preventDefault(); 
        }

至于keydown - 这是最好的方法。还有其他人，但他们不会给你任何优势。