input 框输入框限制只能输入数字,类型为字符串

解决问题一条路行不通要寻找有效的方法，换条思路兴许就解决了。

1. type="number"输入框只能输入数字
   先修改一下样式吧

/*input 框的类型number 去除小箭头*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

input[type="number"] {
  -moz-appearance: textfield;
}

 <el-input
            type="number"
            v-model.number="listFilter.activityId"
            @keydown.native="inputhandle"
            placeholder="请输入预约组id"
  ></el-input>
 //js 方法
 inputhandle(e) {
      let key = e.key;

      // 不允许输入'e','.',"+","-"
      if (key === "e" || key === "." || key === "+" || key === "-") {
        e.returnValue = false;
        return false;
      }
      return true;
    },

这个方法有缺陷，数字到20+的时候会自动相加，还会变成科学记数法，自动添加小数点
这不是需求，放弃了
2.输入框只能输入数字
最近的项目需求是：只能在输入框中输入数字，之前解决方式是 οninput=“value=value.replace(/[^\d]/g,’’)”，这个校验是检验是不是数字，不是数字就替换为空值，但是有一个问题就是：再次输入正确的数字，就不能绑定了，一直都是空值。

 <el-input
            oninput="value=value.replace(/[^\d]/g,'')"
            v-model.number="listFilter.activityId"
            placeholder="请输入预约组id"
          ></el-input>

解决方案：之前的关注点都在input框上面，使用了各种校验的方法，但第一次如果输入的是非数值，会有一个问题这个值会一直在，即使输入框的值是空值，而且还不能输入其他的值。现在使用的框架是ElementUI ，所以就考虑使用框架属性，校验，竟然成功了，贴代码。（具体的是这个框架的校验可以参考官方文档）
prop=“id” :rules=“checkNum” 这是必要的

<el-form-item label="id" prop="id" :rules="checkNum">
          <el-input
            v-model.trim="id"
            placeholder="请输入...."
          ></el-input>
        </el-form-item>

校验方法

 checkNum: [
        {
          validator: (rule, value, callback) => {
            if (/^[1-9]\d*$/.test(value) == false) {
          //寻找非数值替换为空值
          this.id= this.id.replace(
                /[^\d]/g,
                ""
              );
              callback();
            } else {
              callback();
            }
          },
          trigger: "change",
        },
      ],

结束了！