如何用JavaScript实现文本输入仅允许字母数字并即时移除非法字符

Hey，我来帮你搞定这个输入限制的需求！你要的「输入非字母/数字字符时立即移除，且文本光标不前进」的效果，下面的代码可以完美实现，还额外处理了粘贴非法内容的场景：

<input type="text" id="job-name" maxlength="20" pattern="[a-zA-Z0-9]+" style="width:200px; text-align:center;">

<script>
const jobNameInput = document.getElementById('job-name');

// 处理所有输入场景（键盘输入、输入法联想等）
jobNameInput.addEventListener('input', function(e) {
  // 先记住当前光标位置
  const currentCursorPos = this.selectionStart;
  // 保存原始值，用于对比是否有非法字符被过滤
  const originalValue = this.value;
  // 正则过滤掉所有非字母数字的字符
  const filteredValue = originalValue.replace(/[^a-zA-Z0-9]/g, '');

  // 如果原始值和过滤后的值不一样，说明有非法字符被移除了
  if (originalValue !== filteredValue) {
    this.value = filteredValue;
    // 计算光标需要回退的步数（被移除的非法字符数量），然后恢复光标位置
    const cursorOffset = originalValue.length - filteredValue.length;
    this.setSelectionRange(currentCursorPos - cursorOffset, currentCursorPos - cursorOffset);
  }
});

// 处理粘贴事件，防止粘贴非法内容
jobNameInput.addEventListener('paste', function(e) {
  // 阻止默认粘贴行为
  e.preventDefault();
  // 获取粘贴的文本内容
  const pastedContent = (e.clipboardData || window.clipboardData).getData('text');
  // 过滤粘贴内容里的非法字符
  const filteredContent = pastedContent.replace(/[^a-zA-Z0-9]/g, '');
  
  // 把过滤后的内容插入到光标位置
  const startPos = this.selectionStart;
  const endPos = this.selectionEnd;
  this.value = this.value.substring(0, startPos) + filteredContent + this.value.substring(endPos);
  
  // 调整光标到粘贴后的正确位置
  this.setSelectionRange(startPos + filteredContent.length, startPos + filteredContent.length);
});
</script>

关键细节说明： #

• 用input事件替代keydown：keydown只能捕获键盘直接输入的场景，没法处理输入法联想、拖拽输入等情况，input事件能覆盖所有内容变更的场景，更可靠。
• 光标位置保持：这是实现你需求的核心！如果直接替换输入框内容，光标会自动跳到末尾，所以我们先记录光标位置，过滤后计算被移除的非法字符数量，再用setSelectionRange把光标放回原来的位置，用户完全感觉不到光标跳动。
• 粘贴事件处理：很多用户会直接粘贴内容，这个逻辑能过滤粘贴内容里的非法字符，同时保持光标在粘贴后的正确位置，体验更完整。
• 保留你原来的pattern属性：这个属性可以在表单提交时做二次校验，和实时过滤形成双重保障，避免非法内容提交。

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