使用angularjs将焦点更改为下一个输入文本

Question

我的控制器中有一个对象变量（var myObject），在 IHM 中分为 3 个输入文本。

当焦点达到 maxLength 时，我想自动将焦点更改为下一个输入。

var myObject = {
   part1:"",
   part2:"",
   part3:""
}



<form>
    <input type="text" id="part1" ng-model="myObject.part1" maxlength="7"/>
    <input type="text" id="part2" ng-model="myObject.part2" maxlength="12"/>
    <input type="text" id="part2" ng-model="myObject.part2" maxlength="12"/>
</form>

Answer 1

您需要为此使用指令：

app.directive("moveNextOnMaxlength", function() {
    return {
        restrict: "A",
        link: function($scope, element) {
            element.on("input", function(e) {
                if(element.val().length == element.attr("maxlength")) {
                    var $nextElement = element.next();
                    if($nextElement.length) {
                        $nextElement[0].focus();
                    }
                }
            });
        }
    }
});

并按如下方式更新您的表单：

<form>
    <input type="text" id="part1" ng-model="myObject.part1" maxlength="7" move-next-on-maxlength />
    <input type="text" id="part2" ng-model="myObject.part2" maxlength="12" move-next-on-maxlength />
    <input type="text" id="part2" ng-model="myObject.part2" maxlength="12"/>
</form>

Demo

您可以将指令移到 <form> 元素上，但是 build-int jqLit​​e 的 find() 方法将限制您只能通过标签名称查找元素。如果您使用的是完整的 jQuery，或者可以使用 vanillaJS，我建议您使用这种方法。

Answer 2

接受的答案有效，但前提是字段是直接兄弟。例如，如果您在自己的列中有 3 个字段，则需要不同的解决方案：

angular
.module('move-next-directive', [])
.directive('moveNextOnMaxlength',
  function() {
    return {
      restrict: "A",
      link: function(scope, elem, attrs) {
        elem.on('input', function(e) {
          var partsId = attrs.id.match(/focus(\d+)/);
          var currentId = parseInt(partsId[1]);

          var l = elem.val().length;
          if (l == elem.attr("maxlength")) {
            nextElement = document.querySelector('#focus' + (currentId + 1));
            nextElement.focus();
          }
        });
      }
    }
  }
);

为每个输入字段添加一个带编号的“焦点”ID：

<div class="row">
  <div class="col-xs-4">
    <input type="text" id="focus1" maxlength="4" move-next-on-maxlength />
  </div>
  <div class="col-xs-4">
    <input type="text" id="focus2" maxlength="4" move-next-on-maxlength />
  </div>
  <div class="col-xs-4">
    <input type="text" id="focus3" maxlength="4" />
  </div>
</div>

感谢这个答案：https://stackoverflow.com/a/33007493/3319392