### el-input只允許輸入正整數最佳方案（補充：兩位小數） > 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下驗證沒有問題，大功告成！ #### 補充：限制兩位小數 ``` <el-input class="pro_input" v-model="formData.astrict" type="number" step="1" min="0" max="10000" size="mini" @keyup.native="proving1"></el-input> ``` ``` methods :{ proving1() { this.formData.astrict=this.formData.astrict.replace(/[^\.\d]/g,''); //清除"數字"和"."以外的字符 this.formData.astrict=this.formData.astrict.replace(/^\./g,''); //驗證第一個字符是數字而不是. this.formData.astrict=this.formData.astrict.replace(/\.{2,}/g,"."); //只保留第一個. 清除多余的. this.formData.astrict=this.formData.astrict.replace(".","$#$").replace(/\./g,"").replace("$#$",".");//只允許輸入一個小數點 this.formData.astrict=this.formData.astrict.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能輸入兩個小數 } } ```