vue 表单输入格式化中文输入法异常问题

v-model 是 vue.js 提供的语法糖，根据不同的表单控件监听不同的事件，实现对表单控件的数据双向绑定。

当控件是 <input> 输入框时，v-model 监听其 input 事件。

如下所示，这两种写法有什么区别吗？

<input :value="name" @input="name = $event.target.value"><input v-model="name">

输入中文格式化问题

表单输入常见需求对<input>控件输入的内容进行格式化，譬如转成大写字母。如果输入的值包含中文，格式化就会引起输入法异常。

如下图所示，也可以

如果使用 v-model 指令实现数据双向绑定，就不会出现输入法异常，如下图所示，也可以

上面的问题，可以看出 v-model 不只是给变量赋值，那么，它还做了些什么呢？

v-model 源码分析

本文参考的 vue.js 源代码是 2.5.16

翻看 v-model 源码，可以看到 v-model 关注的仍然是

input 事件绑定的处理，如下

这里可以看到，v-model 判断了 posing 属性，当输入法组合没有结束的时候，直接返回，并没有赋值。

并不是标准 dom 元素属性，那它是怎么来的呢？

这里可以看出，posing 属性是 vue.js 添加到 dom 节点上的。

那么，是什么地方调用了这2个函数呢？可以看到，在插入dom节点时，vue.js 监听了

positionstart / positionend 这2个 dom 事件，浏览器兼容性问题可以查阅 MDN 说明

源代码中还发现，在时，也用到了 posing 属性

这里可以看出，在输入法组合过程中，vue.js 变量值的更新亦不会同步到 dom元素的 value 属性。

v-model 实际上是监听了 <input> 控件的 input、positionstart、positionend 三个事件，在输入法组合过程中就直接返回不赋值v-model 指令设置了变量 posing，此标识还用于判断是否更新 dom元素的 value 属性

v-model 输入中文触发的事件

从上面源代码分析可知，v-model 绑定 <input> 输入中文时，实际触发的事件如下

positionstart => 3个 input => positionend 事件，这些都是 <input>控件触发的。一个 input 事件，是源代码里面看到的 onCompositionEnd 回调里面 vue.js 触发的。

1、positionstart事件

修改dom对象的posing属性为 true

2、3个input事件

由于dom对象的posing属性为true，不会赋值，直接返回。

3、positioinend事件

修改dom对象的posing属性为 false

4、vue.js触发的 input事件

由于dom对象的posing属性为false，赋值，修改相应变量的值。

格式化问题原因分析

看下文章开头的示例，如果使用 v-model 指令实现数据双向绑定，就不会出现输入法异常，如下图所示，也可以

由前面的分析可知

v-model 指令设置了变量 posing，虽然代码在 format 函数里更改了 this.name 的值，但此时 posing 标识阻止了将 this.name 的值同步给 input 元素的 value 属性如果你感兴趣的话，可以修改 vue.js 的源代码，将 shouldUpdateValue 函数里对 posing 属性的判断去掉，可以看到输入法又跟之前一样异常了

格式化问题 bugfix

看下文章开头的示例，如果使用 :value, @input 实现数据双向绑定，有两个方案可以解决中文输入异常的问题。

方案一监听 change 事件

等输入结束失去焦点以后，再调用格式化方法，如下所示，也可以

方案二监听 input 事件，判断输入法组合过程

在输入法组合过程中，不进行格式化，如下所示，也可以

以上所述是长沙网络推广给大家介绍的vue 表单输入格式化中文输入法异常问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！