将焦点设置为下一个输入

Question

目前我正在创建一个页面。一些输入字段定义了 maxlength，对于这些字段，我希望它们可以在达到 maxlength 时将焦点移动到下一个输入。

这里我有以下代码段：

$("form input[type=text]").on('input',function () 
{
    if($(this).val().length == $(this).attr('maxlength')) 
    {
        $(this).next("input").focus();
    }
});

此代码在 Chrome 和 Firefox 中运行良好，但在 IE 中无法运行。因此，我寻找解决问题的解决方案。有人建议使用 setTimeout() 方法来解决问题。 所以我修改代码如下：

setTimeout(function(){ 
    $("form input[type=text]").on('input',function () 
    {
        if($(this).val().length == $(this).attr('maxlength')) 
        {
            $(this).next("input").focus();
        }
    });
}, 3000);

但是在我的 IE 环境下还是不行。为了解决这个问题，我也尝试过 setInterval() 。两者都无助于解决问题。因此，我想问我如何才能实现我的目标。还是只是因为我错误地使用了 setTimeout() 方法造成的？

Answer 1

IE8 及以上版本似乎不支持oninput 事件，您可以阅读here

但是你可以替换这一行：

$("form input[type=text]").on('input', function () 

用这个：

$("form input[type=text]").on('keyup paste', function () 

我相信它甚至可以在旧的 Internet Explorer 中工作

编辑

值得注意的是，当paste 事件触发时，文本字段的值不会立即更新。所以你必须等待片刻。代码如下所示：

$("form input[type=text]").on('keyup paste', function () {
  var _this = this;
  setTimeout(function() {
    if($(_this).val().length == $(_this).attr('maxlength')) {
      $(_this).next("input").focus();
    }
  }, 10);  //minimal setTimeout delay
});

在setTimeout 回调中this 指的是window 对象，所以你应该“记住”你在_this 变量中的文本字段，然后在回调中使用它

Answer 2

对于 IE，你需要使用 settimeout 函数，因为它是惰性的，例如：

 setTimeout(function() { $(this).next("input").focus(); }, 10);