如何使用JavaScript禁止文本框输入任何数字？

我来帮你搞定这个需求！你之前的代码有几个关键问题导致没达到预期效果，先给你分析下，再给出靠谱的解决方案：

你之前代码的问题 #

• 第一个代码里的正则/[^0-9]/g是保留数字、移除非数字，和你“禁止数字”的需求完全相反；而且用了change事件，只有输入框失去焦点时才会触发，用户输入过程中还是能看到数字。
• 第二个代码的正则逻辑不对，/[A-Z]/i是检测是否包含字母，就算输入了数字只要有字母就会保留，而且同样依赖change事件，没法实时拦截输入。

正确的解决方案 #

要完全禁止数字输入，我们需要实时拦截输入行为，同时处理键盘输入和粘贴两种场景，下面给你两种可行的实现方式：

方式一：实时过滤输入内容（最简洁） #

使用input事件（用户输入/粘贴时实时触发），每次输入后自动移除所有数字，确保输入框里永远没有数字：

const inputElement = document.querySelector('.ice-cream');
const resultElement = document.querySelector('.result');

inputElement.addEventListener('input', (event) => {
  // 移除所有0-9的数字字符
  const filteredValue = event.target.value.replace(/[0-9]/g, '');
  // 更新输入框的值（用户输入的数字会立刻被清除）
  event.target.value = filteredValue;
  // 同步显示到结果区域
  resultElement.textContent = filteredValue;
});

方式二：阻止数字输入行为（更彻底） #

如果不想让用户有“输入数字又被清除”的体验，可以用keydown事件直接阻止数字键的输入，同时搭配input事件处理粘贴数字的情况：

const inputElement = document.querySelector('.ice-cream');
const resultElement = document.querySelector('.result');

// 阻止键盘输入数字（包括主键盘和小键盘）
inputElement.addEventListener('keydown', (event) => {
  const isNumberKey = /[0-9]/.test(event.key) || (event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105);
  if (isNumberKey) {
    event.preventDefault(); // 阻止默认输入行为
  }
});

// 处理粘贴数字的情况
inputElement.addEventListener('input', (event) => {
  const filteredValue = event.target.value.replace(/[0-9]/g, '');
  event.target.value = filteredValue;
  resultElement.textContent = filteredValue;
});

这两种方式都能满足你“完全禁止输入数字”的需求，你可以根据用户体验偏好选择其中一种。

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