一、使用JS限制 input 輸入框只能輸入純數(shù)字
onkeyup = "value=value.replace(/[^d]/g,'')"
使用 onkeyup 事件,有 bug ,那就是在中文輸入法狀態(tài)下,輸入漢字之后直接回車(chē),會(huì)直接輸入字母,所以:不推薦
onchange = "value=value.replace(/[^d]/g,'')"
缺點(diǎn):使用 onchange 事件,在輸入內(nèi)容后,只有 input 喪失焦點(diǎn)時(shí)才會(huì)得到結(jié)果,并不能在輸入時(shí)就做出響應(yīng)
oninput = "value=value.replace(/[^d]/g,'')"
使用 oninput
事件,完美的解決了以上兩種問(wèn)題,他可以即時(shí)做出響應(yīng),
缺點(diǎn):當(dāng)你先輸入數(shù)字,切輸入法中文,開(kāi)始輸入,之前輸入的數(shù)字會(huì)一個(gè)個(gè)的都消失,直到內(nèi)容為空
最后,我發(fā)現(xiàn)了一個(gè)功能實(shí)現(xiàn)上最好的:同時(shí)使用
onkeyup="this.value=this.value.replace(/D/g,'')" + onafterpaste="this.value=this.value.replace(/D/g,'')"
,唯一不太行的就是 輸入英文或中文是輸入框都會(huì)頻閃一下鍵盤(pán)輸入的東西,但還是可以接受的
二、VUE使用a-input-number組件限制 input 輸入框只能輸入純數(shù)字
利用a-input-number組件的controls屬性api去控制不顯示增減數(shù)值的按鈕
缺點(diǎn):當(dāng)你輸入中文或英文時(shí),只有在輸入框失去焦點(diǎn) 的時(shí)候才會(huì)去校驗(yàn)數(shù)字
三、VUE使用a-input組件利用type=number限制 input 輸入框只能輸入純數(shù)字
當(dāng)input 使用了type='number’后,會(huì)出現(xiàn)這個(gè)增減數(shù)值的按鈕,這里建議使用css去控制不顯示:
<a-input type='number' />// css部分 需要注意瀏覽器兼容問(wèn)題 <style scoped> input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } /* 火狐 */ input { -moz-appearance: textfield; }
缺點(diǎn):就是你輸入中文或者英文他會(huì)直接拼接一個(gè) 'e' 或 'E',所以:‘不推薦’
總結(jié):最最最后,個(gè)人感覺(jué)使用JS的方案四比較合適
<input onkeyup="this.value=this.value.replace(/D/g,'')" onafterpaste="this.value=this.value.replace(/D/g,'')">