vue 表单输入格式化中文输入法异常 vue 表单输入格式化中文输入法异常问题
张跃迁 人气:0v-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 说明：
源代码中还发现，在是否刷新 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 表单输入格式化中文输入法异常问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
加载全部内容