input框只允許輸入正整數最佳方案
阿新 • • 發佈：2018-12-17
背景
管理後臺需要以ID進行搜尋，如果前端不限制從而輸入了英文或中文，後端肯定是會報錯的。所以我們需要在前端限制運營的輸入
number
最先想到的肯定是html5中input框的number，number型別的輸入框中我們無法輸入英文以及中文
<input type="number" min=1 step=1>
html5 number型別的input框右側自帶上下箭頭，我們通過min=1以及step=1限制了最小值以及每次變化的量。
但是這樣仍然不滿足我們的要求，因為還是可以手動輸入-、.、自然對數e等，不能完全做到限制正整數
onkeypress
既然僅僅通過number是無法做到正整數的，那我們是否可以通過監控鍵盤按下事件來做限制呢？
<input type="text"
onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57">
看起來沒有什麼問題 只允許一些功能鍵以及0-9 但是…中文輸入法下是不會觸發onkeypress事件的
那麼keydown呢？很不幸 在中文輸入法下返回的keyCode都是229，無法做出區別
keyup？keyup倒是可以拿到正確的keyCode
keyup是已經發生在input框修改後的事件了，這時候也無法阻止了。ps:執行順序
keydown - > keypress - > keyup
oninput
嘗試了2種方法都有缺陷，那我們可不可以通過監聽oninput事件，如果輸入的值不在0-9，就替換為空字串呢？
<input type="text" oninput="this.value = this.value.replace(/[^0-9]/g, '');">
chrome下驗證沒有問題，大功告成！