input输入框限制只能输入数字,然后在输入中文后导致双向绑定失效

问题:

在vue+element UI 项目中经常会使用到输入框限制为整数或者小数的需求,一般采用类似如下οninput="value=value.replace(/^(\d*\.?\d{0,2}).*/,'$1')"的方法解决,然而当你输入汉字时,确实没有显示上去,再输入数字能正常显示,但是,问题来了,你保存的时候却不是你输入的,这个时候发现你的v-model已经无效了,经过这样的误操作,会导致你的程序出现各种问题,如字段验证、保存数据不是你最后填的数据等。

解决:

在input blur后重新赋值

如果你的input定义了blur事件,就需要把重新赋值写到方法中

猜你喜欢

转载自blog.csdn.net/qq_30893717/article/details/133351044