对于input来说,type="number"可以限制其只能输入数字,但是部分浏览器不支持该属性,如火狐浏览器。
对此,可以利用input监听事件来控制其只能输入数字。
以下为vue项目中结合elementUI的实例
<el-form-item label="期末评估" required>
<el-input v-model="evaluateForm.score" placeholder="输入评分" type="text" @input="validateNum(evaluateForm.score)"></el-input>
</el-form-item>
methods:{
validateNum(val) {
val = val.replace(/(^\s*)|(\s*$)/g, "")
if(!val) {
this.evaluateForm.score = "";
return
}
var reg = /[^\d.]/g
// 只能是数字和小数点,不能是其他输入
val = val.replace(reg, "")
// 保证第一位只能是数字,不能是点
val = val.replace(/^\./g, "");
// 小数只能出现1位
val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
// 小数点后面保留2位
val = val.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3');
this.evaluateForm.score = val;
},
}
方法中相应的控制条件可以自行添加。