Vue.js中如何禁止输入框接收'e'字符（含粘贴场景）

你可以通过粘贴事件拦截+输入兜底过滤两个维度实现全场景禁止e/E字符输入，修改后的组件代码及对应逻辑如下：

组件模板修改 #

<vs-input
  :value="contract.value"
  :class="isMobileOnly ? 'w-full' : 'w-1/2'"
  class="mx-auto"
  type="number"
  :id="`value-${index}`"
  placeholder="Value"
  @keydown="handleKeydown"
  @paste="handlePaste"
  @input="handleInput"
  @change="changeValue(index)"
/>

删除原来的行内onkeydown属性，换成Vue事件绑定，新增粘贴、输入事件监听。

对应方法实现 #

• 键盘输入拦截：同时兼容拦截小写e和大写E的手动输入

handleKeydown(e) {
  if(['e', 'E'].includes(e.key)) {
    e.preventDefault()
  }
}

• 粘贴事件拦截：读取粘贴板内容过滤后再插入，拦截粘贴场景的e字符

handlePaste(e) {
  e.preventDefault()
  const pasteText = (e.clipboardData || window.clipboardData).getData('text')
  const filteredText = pasteText.replace(/[eE]/g, '')
  document.execCommand('insertText', false, filteredText)
}

• 输入事件兜底：覆盖拖拽输入、输入法联想等极端场景，从值层面强制过滤e字符

handleInput(val) {
  this.contract.value = val.replace(/[eE]/g, '')
}

如果你的项目是Vue3，只需要把this.contract.value的赋值逻辑改成对应的响应式变量写法即可。

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