vue elemen ui el-input 限制只能输入数字类型
月份数,薪资、电话号码等的 input 框需要限制只能输入数字类型内容1.实现:监听键盘输入,使用正则过滤掉其他字符oninput="value=value.replace(/^\.+|[^\d.]/g,'')<el-inputv-model.trim="emp_work_experience.dimission_salary"placeholder...
·
月份数,薪资、电话号码等的 input 框需要限制只能输入数字类型内容
1.实现:监听键盘输入,使用正则过滤掉其他字符
οninput="value=value.replace(/^\.+|[^\d.]/g,'')
<el-input
v-model.trim="emp_work_experience.dimission_salary"
placeholder="请输入薪资"
oninput="value=value.replace(/^\.+|[^\d.]/g,'')">
</el-input>
2.遇到坑:然后遇到了一个问题,当输入其他字符再输入数字的时候,输入框中显示有值,但实际去打印 v-model绑定的变量的时候就获取不到新输入值。即使用了一个函数限制输入框只能输入数字,输入其他将会被置空,在输入1时是正确的,之后我们输入一个非数字,这个非数字并被置空之后,再输入新的数字。v-model的值和value的值出现了不同,v-model无法获取到新输入的数值。
详细原理解析:(参考大佬的)
https://blog.csdn.net/qq_41635167/article/details/857369363.
3.解决:在输入框失去焦点的时候,把value值赋值给v-model绑定变量,使两者保持一致
<el-input
v-model.trim="emp_work_experience.dimission_salary"
placeholder="请输入薪资"
oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
@blur="salaryChange">
</el-input>
js:
//月薪改变
function salaryChange(e){
this.emp_work_experience.dimission_salary = e.target.value
}
更多推荐
已为社区贡献5条内容
所有评论(0)