解决问题一条路行不通要寻找有效的方法,换条思路兴许就解决了。
- 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",
},
],
结束了!