如何用jQuery遍历字符串字符并强制匹配输入框的正确字符？

原代码存在的核心问题 #

1. 未初始化变量：inputword未提前赋值，直接执行拼接操作会生成undefined开头的无效字符串，导致输入框内容混乱。
2. 事件选择不合理：keyup事件是在字符已输入到输入框后触发，修改内容会有明显闪烁，且修改后会重复触发事件，引发逻辑混乱。
3. 字符串重构逻辑错误：不匹配时的内层循环试图从未定义的inputword中取字符，完全无法构建合法的有效字符串。
4. 未处理长度超限情况：当输入长度超过目标单词word时，word.charAt(i)会返回空字符串，导致误判不匹配。

方案一：实时修正输入内容（兼容所有输入方式） #

使用input事件覆盖键盘输入、粘贴等所有修改操作，实时保留匹配的字符：

$(document).ready(function() {
  const targetWord = "word".toLowerCase();
  $('#input1').on('input', function() {
    let currentValue = $(this).val().toLowerCase();
    let validStr = '';
    
    // 逐字符校验，只保留匹配的部分
    for (let i = 0; i < currentValue.length; i++) {
      if (i >= targetWord.length) break; // 超过目标长度直接停止
      if (currentValue[i] === targetWord[i]) {
        validStr += currentValue[i];
      } else {
        break; // 遇到不匹配字符，停止构建有效串
      }
    }
    
    // 仅当有效串与当前值不同时更新，避免重复触发事件
    if (validStr !== $(this).val().toLowerCase()) {
      $(this).val(validStr);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input1">

方案二：提前拦截错误输入（更流畅） #

使用keydown事件直接阻止错误字符输入，避免事后修改：

$(document).ready(function() {
  const targetWord = "word".toLowerCase();
  $('#input1').on('keydown', function(e) {
    // 允许控制键（退格、删除、方向键等）
    const allowedKeys = [8, 46, 37, 38, 39, 40];
    if (allowedKeys.includes(e.keyCode)) return;
    
    const currentLen = $(this).val().length;
    const inputChar = e.key.toLowerCase();
    
    // 输入长度超限或字符不匹配时，阻止输入
    if (currentLen >= targetWord.length || inputChar !== targetWord[currentLen]) {
      e.preventDefault();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input1">

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