表格内输入框达到maxlength后自动聚焦下一个输入框的实现方案

你的原有代码失效的原因是$(this).next()只能获取当前元素的同级DOM节点，而表格里的输入框分散在不同的<td>、<tr>中，不属于同级关系，所以无法定位到下一个输入框。

下面提供两种可靠的实现方案，均支持跨<td>、<tr>的自动聚焦：

方案一：基于tabindex属性实现（推荐） #

利用你已经给每个输入框设置的tabindex属性，通过当前输入框的tabindex值，直接定位到下一个tabindex的输入框，逻辑清晰且适配任意DOM结构：

原生JavaScript版本 #

document.addEventListener('DOMContentLoaded', function() {
  // 选中所有带maxlength和tabindex的输入框
  const inputs = document.querySelectorAll('input[maxlength][tabindex]');
  
  inputs.forEach(input => {
    // 监听输入事件（覆盖键盘输入、粘贴等所有输入场景）
    input.addEventListener('input', function() {
      const maxLength = parseInt(this.getAttribute('maxlength'), 10);
      // 检查输入长度是否达到最大值
      if (this.value.length === maxLength) {
        const currentTabIndex = parseInt(this.getAttribute('tabindex'), 10);
        // 查找下一个tabindex的输入框
        const nextInput = document.querySelector(`input[tabindex="${currentTabIndex + 1}"]`);
        if (nextInput) {
          nextInput.focus();
        }
      }
    });
  });
});

jQuery版本 #

$(document).ready(function(){
    $('input[maxlength][tabindex]').on('input', function(){
        const maxLength = parseInt($(this).attr('maxlength'), 10);
        if($(this).val().length === maxLength){
            const currentTab = parseInt($(this).attr('tabindex'), 10);
            const nextInput = $(`input[tabindex="${currentTab + 1}"]`);
            if(nextInput.length){
                nextInput.focus();
            }
        }
    });
});

方案二：遍历所有输入框序列 #

如果不想依赖tabindex，也可以提前收集所有目标输入框的序列，当当前输入框达到长度时，定位它在序列中的下一个元素：

原生JavaScript版本 #

document.addEventListener('DOMContentLoaded', function() {
  const inputs = Array.from(document.querySelectorAll('input[maxlength]'));
  
  inputs.forEach((input, index) => {
    input.addEventListener('input', function() {
      const maxLength = parseInt(this.getAttribute('maxlength'), 10);
      if (this.value.length === maxLength && index < inputs.length - 1) {
        inputs[index + 1].focus();
      }
    });
  });
});

关键注意事项 #

• 推荐使用input事件而非keyup：input事件能覆盖键盘输入、鼠标粘贴、拖拽输入等所有输入场景，兼容性更全面。
• 若使用tabindex方案，需保证tabindex值是连续的正整数，避免跳号导致无法找到下一个输入框。
• 最后一个输入框达到最大长度时，不会触发聚焦操作，符合常规交互逻辑。

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