微软输入法导致Vue-elementui中el-input双向绑定失效的解决

472 阅读1分钟
开发中遇到一个bug:

image.png

在这里的编码框输入的数据,需求是仅可以输入英文和数字。因此使用了以下代码来限制:

<el-input oninput="value=value.replace(/[^\a-z0-9A-Z]/g,'')">

测试中,使用搜狗输入法没有这个问题,而使用window的微软输入法,则会在关闭dialog再打开之后,输入框中残留英文,并且v-model双向绑定失效。

输入时,不取消输入法,直接关闭dialog

image.png

再次打开dialog,英文还在,并且与v-model绑定的form数据分离。

image.png

使用了很多手段去强行绑定form和dom,都无法完美解决。后经同事帮助,有以下两种方法:

1. 使用v-if,在每次打开dialog时,重新创建这个el-input的dom
<el-input v-if="visibleDialog" oninput="value=value.replace(/[^\a-z0-9A-Z]/g,'')">
2. 使用正则替换时,不替换dom的value,而是替换form中的数据
<el-input v-on:input="handleOnChange">
handleOnChange() {
    this.moduleForm.catNo = this.moduleForm.catNo.replace(/[^a-z0-9A-Z]/g, '');
},

可能在经验丰富的前端开发者手中这不是个大问题,可我花了几个小时都没彻底解决……踏踏实实积累经验吧!