AngularJS实现文本框达最大长度后自动跳转至下一个输入框

嘿，我来帮你搞定这个自动跳转的需求！你已经有了numOnly指令来限制输入数字，现在只需要在这个指令里扩展一点逻辑，就能实现输入满指定长度后自动跳到下一个文本框的功能啦。

步骤1：修改numOnly指令，添加自动跳转逻辑 #

我们可以在原指令的link函数里，监听输入框的input事件，当输入内容长度达到maxlength属性值时，自动定位并聚焦到下一个输入框。同时保留原有的数字验证逻辑，还要记得在指令销毁时清理事件监听，避免内存泄漏。

修改后的完整指令代码如下：

function numOnly() { 
  var directive = { 
    restrict: 'A', 
    scope: { ngModel: '=ngModel' }, 
    link: link 
  }; 
  return directive; 

  function link(scope, element, attrs) { 
    // 原有的数字验证逻辑
    scope.$watch('ngModel', function (newVal, oldVal) { 
      var arr = String(newVal).split(''); 
      if (arr.length === 0) return; 
      if (arr.length === 1 && (arr[0] === '-' || arr[0] === '.')) return; 
      if (isNaN(newVal)) { 
        scope.ngModel = ""; 
      } 
    }); 

    // 新增自动跳转逻辑
    function handleInput() {
      var maxLength = parseInt(attrs.maxlength, 10);
      var currentValue = scope.ngModel || '';
      if (currentValue.length === maxLength) {
        // 找到当前td的下一个td里的输入框
        var nextTd = element[0].parentElement.nextElementSibling;
        if (nextTd) {
          var nextInput = nextTd.querySelector('input');
          // 确保下一个输入框存在且不是只读状态
          if (nextInput && !nextInput.hasAttribute('readonly')) {
            nextInput.focus();
          }
        }
      }
    }

    // 绑定input事件
    element.on('input', handleInput);

    // 指令销毁时移除事件监听
    scope.$on('$destroy', function() {
      element.off('input', handleInput);
    });
  } 
}

步骤2：表单代码无需额外修改 #

你的现有表单结构已经满足要求：每组的第一个输入框和第二个输入框分别位于相邻的<td>标签内，所以我们的指令可以准确找到下一个目标输入框。

功能说明 #

• 当第一个输入框（maxlength=9）输入满9位有效数字时，会自动聚焦到同组的第二个输入框（maxlength=3）
• 如果第二个输入框处于只读状态（ng-readonly为true），则不会执行跳转，避免干扰已锁定的内容
• 原有的数字验证逻辑完全保留，确保输入内容只能是数字

内容的提问来源于stack exchange，提问作者Thirupathi cst