### 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'); //只能输入两个小数 } } ```