el-input只允许输入数字

有时候输入框里只允许输入数字

法一：

<el-input
 v-model="inputValue"
  onKeypress="return(/^[0-9]*$/.test(String.fromCharCode(event.keyCode)))">
</el-input>

如果是单纯输入的话，以上代码是完全可以满足只允许输入数字的需求的，不过会有个小问题，就是在复制粘贴的情况下可以把中文给带进输入框中，那么如何去解决这个问题呢
我们可以加上type=number的属性来解决以上出现的问题，代码如下

<el-input
 v-model="inputValue"
 type="number"
  onKeypress="return(/^[0-9]*$/.test(String.fromCharCode(event.keyCode)))">
</el-input>

以上写法在移动端不生效
测试设备为 iPhone 12 Pro，系统版本为14.8.1

浏览器环境为微信内置浏览器
微信版本为Version 8.0.29
其他版本表现情况未知

法二：
基于以上设置，如果还有譬如以下的其他限制：

• 仅数字类型：1~100的输入整数
• 仅数字类型输入，＞1的整数，长度6位数

可以用以下方法

handlerValueChange(condition, target, field) {
 if (condition) {
    target.lastValue = target.value;
  } else {
    target.value = target.lastValue;
    this.form[field] = target.value;
  }
},
// 仅数字类型：1~100的输入整数，其他不上屏
onPercentageKeypress(event) {
  const regexp = new RegExp(`^[1-9][0-9]{0,2}$`);
  const value = event.target.value;
  this.handlerValueChange(
    (regexp.test(value) && !isNaN(+value) && +value < 101 && +value > 0) ||
      value === "",
    event.target,
    'percentage'
  );
},
// 仅数字类型输入，＞1的整数，长度6位数，其他或超出不上屏
onPrizeKeypress(event) {
  const regexp = new RegExp(`^[1-9][0-9]{0,5}$`);
  const value = event.target.value;
  this.handlerValueChange(regexp.test(value) || value === "", event.target, 'prize');
},

<el-input
  v-model="form.percentage"
  placeholder="请输入内容"
  type="number"
  @keyup.native="onPercentageKeypress"
  @change.native="onPercentageKeypress"
></el-input>

<el-input
  v-model="form.prize"
  type="number"
  @keyup.native="onPrizeKeypress"
  @change.native="onPrizeKeypress"
></el-input>

第二种方法可以在移动端使用，目前没有发现不兼容设备

关于移动端使用第一种方法有问题具体原因有待考究，后面有查询到具体原因的话，再继续更新……
以上是我的总结，我仅在Chrome49、Chrome65预览过，如果有哪位同学使用过后发现有兼容性问题，欢迎吐槽