问Angular js在达到最大字符长度时将焦点移到下一个输入字段，在字符长度最小时将焦点移到上一个输入字段
EN

Stack Overflow用户

提问于 2016-08-25 06:31:02

回答 1查看 3.3K关注 0票数 2

我的任务

创建3个输入，每个输入最大字符数。输入第五个字符时的长度为5。在输入中，光标应该在插入字符后立即跳转到下一个输入。删除输入的第一个字符时，光标应在该字符被删除后立即跳到前一个输入的末尾。

我所做的一切

创建了3个输入字段，并使用watch group将字符长度限制为5，运行正常

我的问题

当输入字段的最大字符长度达到5时，我需要将光标移动到下一个输入字段，如果从输入字段中删除了第一个字符，则光标应自动移动到上一个输入字段的末尾

我的柱塞链接在这里https://plnkr.co/edit/Bcq6slz9gbK8r6Lm8MAh?p=preview

我的angular代码

var app = angular.module("task8", []);
app.controller("taskController8",["$scope", function ($scope) {

$scope.charLength=5

$scope.$watchGroup(['firstInput', 'secondInput', 'thirdInput'], function (newValue, oldValue) {
    if (newValue) {
        if (newValue[0].length > 5) {
            $scope.firstInput = oldValue[0];
        }
        else if (newValue[1].length > 5) {
            $scope.secondInput = oldValue[1];
            newValue[2].focus();
        }
        else if (newValue[2].length > 5) {
            $scope.thirdInput = oldValue[2];
    }
        $scope.charLength = 5 - newValue[0].length;
        $scope.charLength = 5 - newValue[1].length;
        $scope.charLength = 5 - newValue[2].length;
    }
})

$scope.updateBody = function (event) {
    return false;
};
 }]);

autofocus

angularjs

电商出海AIGC福利包

嘿！这里有一份电商AIGC福利包等你查收！【电商素材提效】【物料本土化】超多AIGC能力免费送！快点击参与吧！

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-08-27 22:59:06

下面是一个使用AngularJS Directive的工作示例

angular
  .module('MyApp', [])
  .directive('moveFocus', function() {
    function getCaretPosition(elem) {
      // Internet Explorer Caret Position
      if (document.selection && document.selection.createRange) {
        var range = document.selection.createRange();
        var bookmark = range.getBookmark();
        return bookmark.charCodeAt(2) - 2;
      }

      // Firefox Caret Position
      return elem.setSelectionRange && elem.selectionStart;
    }

    return {
      restrict: 'A',
      link: function(scope, elem, attr) {
        var tabindex = parseInt(attr.tabindex);
        var maxlength = parseInt(attr.maxlength);

        elem.on('input, keydown', function(e) {
          var val = elem.val(),
              cp, 
              code = e.which || e.keyCode;

          if (val.length === maxlength && [8, 37, 38, 39, 40, 46].indexOf(code) === -1) {
            var next = document.querySelectorAll('#input' + (tabindex + 1));
            next.length && next[0].focus();
            return;
          }

          cp = getCaretPosition(this);
          if ((cp === 0 && code === 46) || (cp === 1 && code === 8)) {
            var prev = document.querySelectorAll('#input' + (tabindex - 1));
            e.preventDefault();
            elem.val(val.substring(1));
            prev.length && prev[0].focus();
            return;
          }
        });
      }
    };
  });

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MyApp">
  <form name="form">
    <div class="form-group">
      <label for="input1">Input 1</label>
      <input type="text" class="form-control" id="input1" name="input1" tabindex="1" maxlength="5" move-focus placeholder="Input 1">
    </div>
    <div class="form-group">
      <label for="input2">Input 2</label>
      <input type="text" class="form-control" id="input2" name="input2" tabindex="2" maxlength="5" move-focus placeholder="Input 2">
    </div>
    <div class="form-group">
      <label for="input3">Input 3</label>
      <input type="text" class="form-control" id="input3" name="input3" tabindex="3" maxlength="5" move-focus placeholder="Input 3">
    </div>
  </form>
</div>