如何禁止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了，如有錯誤，歡迎指正。

總結

以上是生活随笔為你收集整理的如何禁止input框输入特殊字符的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。