vue elemen ui el-input 限制只能输入数字类型

2024年3月23日 295次阅读 来源: ymumi

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

 

    原文作者：ymumi
    原文地址: https://blog.csdn.net/ymumi/article/details/103275131
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞