Vue中onkeypress的正确用法：如何阻止输入框输入特殊字符？

嘿，我来帮你搞定这个问题！首先你遇到的'e is not defined'错误，是因为在Vue事件绑定里，直接写blockSpecialChar(e)时，这个e并没有被正确传递——Vue不会自动把事件对象塞进你手动写的参数里，得用正确的方式传递事件对象才行。

下面给你两种可行的解决方案，同时我也会优化一下你的校验逻辑（毕竟keyCode已经被Web标准废弃了，用key属性判断更靠谱）：

方法一：直接绑定方法（Vue自动传事件对象） #

先修正输入框的绑定代码（注意你写的type="test"是笔误，应该是type="text"）：

<input type="text" placeholder="phone" v-model="pin.phoneNumber" @keypress.prevent="blockSpecialChar" />

然后调整你的校验函数，用更标准的方式判断允许的字符：

blockSpecialChar(e) {
  // 允许大小写字母、数字，这里用正则直接校验输入的字符
  const allowedPattern = /^[a-zA-Z0-9]$/;
  // 如果输入的字符不符合规则，阻止默认行为
  if (!allowedPattern.test(e.key)) {
    e.preventDefault();
  }
}

这里用e.key直接获取输入的字符，比keyCode更直观，也更兼容各种浏览器。

方法二：显式传递事件对象（用$event） #

如果之后你需要给函数传递额外参数，就可以用这种方式，把事件对象通过$event显式传进去：

<input type="text" placeholder="phone" v-model="pin.phoneNumber" @keypress.prevent="blockSpecialChar($event)" />

函数写法和上面一样，这样e就会被正确传递，不会再报未定义的错误了。

额外优化：处理粘贴场景 #

用户可能会通过粘贴操作输入特殊字符，所以最好加上粘贴事件的处理，避免漏网之鱼：

<input 
  type="text" 
  placeholder="phone" 
  v-model="pin.phoneNumber" 
  @keypress.prevent="blockSpecialChar"
  @paste="handlePaste"
/>

然后添加粘贴处理函数：

handlePaste(e) {
  const pastedContent = e.clipboardData.getData('text');
  const allowedPattern = /^[a-zA-Z0-9]*$/;
  if (!allowedPattern.test(pastedContent)) {
    e.preventDefault();
    // 这里可以换成更友好的提示，比如用Vue的消息组件
    alert('只能输入字母和数字哦');
  }
}

关于keyCode的小提醒 #

顺便说下，keyCode已经被MDN标记为废弃特性了，不同浏览器的表现可能不一致，所以尽量用e.key或者e.code来做键盘事件的判断，代码会更稳定。

这样调整之后，就能完美实现阻止特殊字符输入的需求啦！

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