jQuery 焦点在 Chrome 中不起作用答案

【问题标题】：jQuery focus not working in ChromejQuery 焦点在 Chrome 中不起作用
【发布时间】：2013-06-27 09:26:14
【问题描述】：

以下代码在 FireFox 中运行良好，但在最新版本的 Chrome 中无法运行。

HTML：

<input type="text" id="one" placeholder="Type two chars" />
<input type="text" id="two" placeholder="It should focus here" />

jQuery:

$("#one").on("input", function() {
    if($("#one").val().length == 2) { $("#two").focus(); }
});

有谁知道我该如何解决这个问题？

【问题讨论】：

你为什么将 4 个参数传递给 on 方法？你不必这样做。
哪个版本？在 29 中它工作正常。
有点老套，但是：jsfiddle.net/yg49k/1 现在对我有用。
看起来谷歌解决了这个问题，因为我的 jsFiddle 链接现在可以正常工作了。

标签： javascript jquery html google-chrome

【解决方案1】：

似乎是 Chrome 中的一个错误。有时太快无法正确执行事件；）

找到解决方法http://jsfiddle.net/Rd2rZ/

$("#one").on("input", function() {
    if($("#one").val().length == 2) { 
        setTimeout(function(){
            $("#two").focus();
        }, 1);
    }
});

以最小的延迟使用setTimeout。它会减慢 Chrome 的速度并使其正常工作。

【讨论】：

完美运行，不会影响其他非常有用的on("input...
是的，很简单，甚至不需要为超时设置任何延迟
是的，非常有用的事件，它取代了一堆其他事件的使用。但是 IE onpropertychange 事件。
@roasted - 你说得对，我已经删除了, 1，它工作正常。谢谢。
@roasted 实际上设置 0 或 1 没有区别，因为不同的浏览器无法注册少于一些毫秒的超时。在移动浏览器上，此值可能从 4 到 20 毫秒不等。 stackoverflow.com/questions/8341803/…

【解决方案2】：

你应该使用：

$("#one").on("keyup paste",function() {
    console.log($(this).val());
    if($(this).val().length == 2) { $("#two").focus(); }
});

DEMO

#five 处理程序也是如此。

oninput 事件似乎与onkeypress 具有相同的行为。

【讨论】：

与on("input... 相比，on("keyup paste... 方法有什么缺点吗？我发现它是可靠的（除了使用focus() 显然......）
抱歉误读评论。就像我说的那样，缺点是与 oninput 相比，在模糊元素上不会触发此处理程序
很公平。我注意到如果您按住键，它会忽略该功能，而 input 不会。
然后用按键测试。但请注意，onkeypress 不会被 chrome 中的 basckspace 触发

【解决方案3】：

$("#one").keydown(function(){
   if($(this).val().length==2)
   {
      $("#two").focus();
   }
});

【讨论】：

keydown 不利于检索输入的当前（预期）值

【解决方案4】：

我遇到了同样的问题，并使用以下代码修复了它：
您还应该为您的输入提供一个名称属性以使其正常工作。

$("#one").on("input", null, null, function() {  
   if($("#one").val().length == 2) {  
       setTimeout(function() { $('input[name="one"]').focus() }, 3000);  
   }  
});

希望这可以帮助那些没有使用其他建议的人。

【讨论】：