javascript - 将焦点设置到下一个输入

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 事件被触发时，textfield 的值不会立即更新。所以你必须等一下。代码如下所示:

$("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 中的文本字段变量，然后在回调中使用它