如何禁止用户在type为text的input输入框中输入数字？

以下是三种不同适配场景的可直接运行的实现方式：

1. 实时输入过滤（推荐） #

通过监听input事件实时替换内容中的数字，适配所有输入场景（键盘输入、复制粘贴、拖拽插入等），用户无感知：

<input type="text" name="name" id="nameInput" />

<script>
const nameInput = document.querySelector('#nameInput')
nameInput.addEventListener('input', () => {
  // 正则匹配所有0-9数字，替换为空
  nameInput.value = nameInput.value.replace(/\d/g, '')
})
</script>

\d是正则中匹配数字的简写，等价于[0-9]，加g修饰符表示全局匹配所有数字字符

2. 原生HTML表单校验 #

无需编写JS，仅通过pattern属性实现表单提交时的校验提示：

<input 
  type="text" 
  name="name" 
  pattern="\D*" 
  title="输入内容不能包含数字"
  required
/>

\D是正则中匹配非数字字符的简写，*表示匹配任意数量的非数字字符，仅在表单提交时触发校验，不会拦截实时输入

3. 键盘输入拦截 #

通过监听keydown事件直接拦截数字按键输入，仅适配纯键盘输入场景：

<input type="text" name="name" id="nameInput" />

<script>
const nameInput = document.querySelector('#nameInput')
nameInput.addEventListener('keydown', (e) => {
  // 同时匹配主键盘区和小键盘区的数字按键
  const isNumKey = (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)
  if (isNumKey) e.preventDefault()
})
</script>

该方案无法拦截复制粘贴、输入法插入的数字，仅适合简单场景使用

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