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下驗證沒有問題,大功告成!