月份数,薪资、电话号码等的 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
}

 

Logo

助力广东及东莞地区开发者,代码托管、在线学习与竞赛、技术交流与分享、资源共享、职业发展,成为松山湖开发者首选的工作与学习平台

更多推荐