ASP.NET Core MVC输入4位字符后跳转至下一个文本框问题排查

核心问题 #

1. JavaScript函数作用域错误
   你把jumpToNextTextbox函数定义在了$(document).ready()的回调内部，导致函数仅在该回调的局部作用域生效，全局的oninput事件无法调用到这个函数，所以输入满4位后没有任何反应。

2. TextBoxFor属性写法错误
   在TextBoxFor的匿名对象中嵌套了htmlAttributes字段，这不符合ASP.NET MVC辅助方法的语法，会导致id属性无法正确渲染到文本框上。后续document.getElementById(nextTextboxId)找不到目标元素，自然无法实现跳转。

修复代码 #

修正后的JavaScript #

<script type="text/javascript">
    // 将函数定义在全局作用域，确保oninput事件能正常调用
    function jumpToNextTextbox(event, nextTextboxId) {
        if (!event || !event.target) return;
        
        // 把maxLength转为数字，避免字符串与数字比较的潜在问题
        const maxLength = parseInt(event.target.maxLength, 10);
        if (event.target.value.length === maxLength) {
            const nextTextBox = document.getElementById(nextTextboxId);
            if (nextTextBox) {
                nextTextBox.focus();
            }
        }
    }

    $(document).ready(function() {
        // 此处放置其他页面初始化逻辑即可
    });
</script>

修正后的文本框代码 #

<div class="col-sm-2" style="margin-right:2px;">
    @Html.TextBoxFor(model => model.Field1, new { 
        oninput = "limitInput(this, 4); jumpToNextTextbox(event, 'field2')", 
        @class = "form-control", 
        maxlength = "4", 
        id = "field1" 
    })
</div>

<div class="col-sm-2" style="margin-right:2px;">
    @Html.TextBoxFor(model => model.Field2, new { 
        oninput = "limitInput(this, 4); jumpToNextTextbox(event, 'field3')", 
        @class = "form-control", 
        maxlength = "4", 
        id = "field2" 
    })
</div>
                    
<div class="col-sm-2" style="margin-right:2px;">
    @Html.TextBoxFor(model => model.Field3, new { 
        oninput = "limitInput(this, 4); jumpToNextTextbox(event, 'field1')", 
        @class = "form-control", 
        maxlength = "4", 
        id = "field3" 
    })
</div>

额外提示 #

• 确保limitInput函数同样处于全局作用域，否则也会导致该函数调用失败。
• 建议尽量避免使用内联事件（如oninput），改用jQuery事件绑定的方式更易维护，示例：

  $(document).ready(function() {
      $('.form-control').on('input', function() {
          limitInput(this, 4);
          const maxLength = parseInt(this.maxLength, 10);
          if (this.value.length === maxLength) {
              // 根据当前id自动匹配下一个文本框
              const nextId = this.id === 'field1' ? 'field2' : (this.id === 'field2' ? 'field3' : 'field1');
              $('#' + nextId).focus();
          }
      });
  });
  

  这种方式可以去掉内联的oninput属性，代码结构更简洁。

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