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 事件：

input 事件绑定的回调代码处理，如下：

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

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

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

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

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

compositionstart 事件

compostionend 事件

源代码中还发现，在是否刷新 dom 属性值时，也用到了 composing 属性：

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

综上所述：

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

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

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

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

1、compositionstart事件

修改dom对象的composing属性为 true

2、3个input事件

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

3、compositioinend事件

修改dom对象的composing属性为 false

4、vue.js触发的 input事件

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

格式化问题原因分析

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

由前面的分析可知：

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

格式化问题 bugfix

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

方案一：监听 change 事件

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

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

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

总结

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