磁条阅读器输入处理异常：超50字符溢出至已选中的下一个输入框

问题根源在于input事件是内容已写入输入框后才触发，磁条阅读器的输入是连续批量发送字符，当第一个输入框长度到50时切换焦点，队列中剩余的字符会自动输入到已获得焦点的第二个框里。

要解决这个问题，需要在字符即将插入输入框前拦截超出长度的内容，同时切换焦点，推荐使用beforeinput事件（该事件覆盖键盘、粘贴、阅读器等所有输入场景）：

修改后的完整代码 #

<body>
<form name="test" id="test">
    <input type="text" name="test_text1" id="test_text1" maxlength="50">
    <input type="text" name="test_text2" id="test_text2">
    <span id="nuttin">&nbsp;</span>
</form>
<script>
    $(document).ready(function(){
        $("#test_text1").select();
        // 替换input事件为beforeinput，传入事件对象
        $("#test_text1").on('beforeinput', function(e){lookForSwipe(this, e)});
    });
    function lookForSwipe(field, e){
        // 当当前输入框内容长度已达50时，拦截后续输入
        if(field.value.length >= 50){
            e.preventDefault(); // 阻止当前字符插入输入框
            $("#test_text2").focus().select(); // 切换到下一个输入框并选中
        }
    }
</script>
</body>

额外说明 #

• 保留maxlength="50"作为双重保险，防止意外输入超出长度
• beforeinput事件在主流浏览器（Chrome、Firefox、Edge）均支持，若需兼容旧版IE，可补充keydown事件做兜底判断：

  $("#test_text1").on('keydown', function(e){
      if(this.value.length >= 50 && !e.ctrlKey && !e.metaKey){
          e.preventDefault();
          $("#test_text2").focus().select();
      }
  });
  

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