Firefox粘贴事件过滤非数字及number输入框纯数字输入实现

看起来你已经搞定了常规按键的数字校验，接下来咱们专门处理Firefox里的粘贴事件过滤非数字内容的问题。

核心思路 #

粘贴事件里，我们需要先获取粘贴的文本内容，过滤掉非数字字符，再替换输入框的对应内容，同时必须阻止默认粘贴行为——不然Firefox还是会把原始内容插进去。这里要注意Firefox和其他浏览器在剪贴板内容获取上的小差异，得做兼容处理。

完整实现代码 #

先帮你补全之前没写完的按键校验函数，再加上粘贴事件的处理逻辑：

const validKeys = new Set([ 
  'home', 'end', 'pageup', 'pagedown', 'delete', 'backspace', 'arrowleft', 'arrowright'
]);

function isValidKeypress(e) {
  // 允许0-9的数字字符
  if (e.charCode >= 48 && e.charCode <= 57) {
    return true;
  }
  // 允许导航、删除类的控制键
  if (e.key && validKeys.has(e.key.toLowerCase())) {
    return true;
  }
  // 其他按键直接阻止
  e.preventDefault();
  return false;
}

// 专门处理粘贴事件的函数
function handlePaste(e) {
  e.preventDefault(); // 先阻止默认粘贴行为，避免无效内容插入
  let pasteText = '';
  
  // 兼容Firefox和其他浏览器的剪贴板内容获取
  if (e.clipboardData) {
    pasteText = e.clipboardData.getData('text');
  } else if (window.clipboardData) {
    pasteText = window.clipboardData.getData('Text');
  }
  
  // 过滤掉所有非数字字符
  const filteredText = pasteText.replace(/[^0-9]/g, '');
  
  // 获取输入框元素，处理光标位置和内容替换
  const input = document.getElementById('app-client-id');
  const startPos = input.selectionStart;
  const endPos = input.selectionEnd;
  const currentValue = input.value;
  
  // 替换选中区域或插入到光标位置
  input.value = currentValue.substring(0, startPos) + filteredText + currentValue.substring(endPos);
  
  // 把光标移到粘贴内容的末尾，保持用户操作连贯性
  input.selectionStart = input.selectionEnd = startPos + filteredText.length;
}

// 给输入框绑定事件
const inputElement = document.getElementById('app-client-id');
inputElement.addEventListener('keypress', isValidKeypress);
inputElement.addEventListener('paste', handlePaste);

关键点说明 #

• 剪贴板兼容：Firefox里通过e.clipboardData.getData('text')获取剪贴板内容，旧IE用window.clipboardData，这里做了兼容覆盖。
• 内容过滤：用正则/[^0-9]/g精准匹配并移除所有非数字字符，只保留有效内容。
• 光标维护：粘贴后自动把光标移到粘贴内容的末尾，避免光标跳转到输入框最末端，提升用户体验。
• 默认行为阻止：必须调用e.preventDefault()，否则浏览器会执行原生粘贴，过滤逻辑就白做了。

额外优化建议 #

• 可以保留输入框的pattern="[0-9]+"属性，配合表单提交时的校验，形成双重保障。
• 如果需要限制输入长度，可以在粘贴后判断总字符数，超出部分直接截断。

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