JavaScript文本框输入限制：仅允许数字、退格、方向键及Shift选中操作

原有方案缺陷说明 #

• 正则方案：未判断主键盘数字输入时的Shift按键状态，无法拦截!@#$%^&*()等Shift+数字生成的特殊字符；通过String.fromCharCode转换按键码的逻辑对非输入类控制键适配不准确。
• 无正则方案：逻辑判断条件书写错误（e.keyCode <= 48 && e.keyCode >= 57为永假条件），且多绑定到input/keyup事件，输入后才删除非法字符导致出现闪烁。

正确实现方案 #

选择绑定keydown事件，在字符输入到文本框之前做拦截，从根源避免闪烁问题，同时覆盖所有允许的操作场景：

原生JS实现（兼容现代浏览器） #

const numInput = document.querySelector('#target-input');
numInput.addEventListener('keydown', (e) => {
  // 放行允许的控制键：退格、左方向、右方向（含Shift+方向选中内容操作）
  const allowControlKeys = ['Backspace', 'ArrowLeft', 'ArrowRight'];
  if (allowControlKeys.includes(e.key)) return;

  // 放行未按Shift的主键盘数字、小键盘数字输入
  const isMainBoardNum = !e.shiftKey && /^[0-9]$/.test(e.key);
  const isNumpadNum = e.keyCode >= 96 && e.keyCode <= 105;
  if (isMainBoardNum || isNumpadNum) return;

  // 拦截所有其他输入
  e.preventDefault();
});

兼容旧浏览器版本（纯keyCode判断） #

const numInput = document.querySelector('#target-input');
numInput.addEventListener('keydown', function(e) {
  const keyCode = e.keyCode || e.which;
  // 放行退格(8)、左方向(37)、右方向(39)
  if (keyCode === 8 || keyCode === 37 || keyCode === 39) return;

  // 放行未按Shift的主键盘数字(48-57)、小键盘数字(96-105)
  const validMainNum = !e.shiftKey && keyCode >= 48 && keyCode <= 57;
  const validNumpadNum = keyCode >= 96 && keyCode <= 105;
  if (validMainNum || validNumpadNum) return;

  e.preventDefault();
});

额外适配说明 #

如果需要支持复制/粘贴/剪切操作，可在上述逻辑中额外放行对应快捷键：

// 新增控制键放行逻辑
if (e.ctrlKey && ['c','v','x'].includes(e.key.toLowerCase())) return;

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