Question

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

关注焦点，放大输入（通过动画制作）
关注焦点，选择当前输入内容
在输入中按下'enter'时，模糊输入
on blur，缩小输入

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

$('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() );
    }
});

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

如果我把它放在animate()回调中，那么在动画发生时用户输入的任何内容都会被覆盖，这是有问题的。那么让select()正常工作的最佳方法是什么？
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而言 - 这是最好的方法。还有其他人，但他们不会给你任何好处。

接受jquery输入焦点/选择/模糊的输入键的最佳方法是什么？

2 个答案: