如何禁止input框输入特殊字符

如何禁止input框输入特殊字符

前端开发中可能会碰到input框禁止输入特殊字符的情况，下面是解决办法，输入框内只能输入字母数字和基本汉字，亲测有效。
HTML部分

<div class="container">
  <div class="test">
    用户名：<input type="text" name="name" id="name"/>
  </div>
</div>

JS部分
1. onkeyup 事件 + onblur 事件
这种方式输入的特殊字符会先显示，然后瞬间被替换掉，Ctrl + v 也会被替换掉，但是鼠标右键粘贴的特殊字符不会替换掉，只有失去焦点时才被替换掉。

const input = document.getElementById('name');
input.onkeyup = function(){
    this.value = this.value.replace(/([^0-9A-z\u4e00-\u9fa5]|[\^\_])/g,'');
}
input.onblur = function(){
    this.value = this.value.replace(/([^0-9A-z\u4e00-\u9fa5]|[\^\_])/g,'');
}

2. onchange 事件
这里说一下onchange事件的触发步骤：

• 当输入框获得焦点时，系统储存当前值
• 当输入框失去焦点时，判断当前值是否与之前储存值相等，如不同则触发 onchange 事件
• 此外，非IE浏览器回车键也能触发 onchange 事件

---

因此，这种方式相当于 onblur 事件，失去焦点时特殊字符被替换掉。

input.onchange = function(){
   this.value = this.value.replace(/([^0-9A-z\u4e00-\u9fa5]|[\^\_])/g,'');
}

3. oninput 事件
这种方式不会出现特殊字符被替换的闪烁情况，而且对于 Ctrl + v 复制和鼠标右键复制均生效。

input.oninput = function(){
   this.value = this.value.replace(/([^0-9A-z\u4e00-\u9fa5]|[\^\_])/g,'');
}

---

总结：
oninput事件可以完美解决禁止输入框输入特殊字符的情况，而其他方式会出现特殊字符闪烁，失去焦点去除特殊字符就更low了，如有错误，欢迎指正。