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

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

当控件是输入输入框时，v-model侦听其输入事件。

如下图，这两种写作方法有什么区别？

Input:值=' name' @ input=' name=$ event。目标。值'输入v-model=' name '输入中文格式问题

表单输入的常见要求：格式化输入控件的输入内容，例如，将其转换为大写字母。如果输入值包含中文，格式化将导致输入法异常。

如下图所示，也可以在线试用：

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

从上面的问题中，我们可以看到v-model并不只是给变量赋值，那么它还做什么呢？

v型源代码分析

本文引用的vue.js的源代码是2.5.16

查看v-model的源代码，我们可以看到v-model仍然关注输入事件：

输入事件绑定的回调代码处理如下：

这里可以看到，v-model判断构成属性，当输入法组合没有完成时，直接返回，不赋值。

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

这里可以看到，组合属性是由vue.js添加到dom节点的.

那么，这两个函数在哪里被调用呢？您可以看到vue.js在插入dom节点时监听了composition start/composition end事件：

合成开始/合成结束是两个dom事件。有关浏览器兼容性问题，请参考MDN描述：

Compositionstart事件

复合事件

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

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

总而言之：

事实上，v-model监控输入控制的三个事件：input、compositionstart和compositionend。在输入法组合过程中，直接返回没有赋值的v-model指令，设置变量组合。此标志还用于确定是否更新dom元素的value属性。

汉语v型输入触发的事件

根据上面的源代码分析，当v-model将输入绑定为中文时，实际触发的事件如下：

composition start=3 input=composition end事件，由输入控件触发。最后一个输入事件是由vue.js在源代码中看到的onCompositionEnd回调中触发的。

1.compositionstart事件

将dom对象的构成属性修改为true

2、3个输入事件

由于dom对象的构成属性为真，因此不会被赋值，而是直接返回。

3.合成结束事件

将dom对象的构成属性修改为false

4.vue.js触发的输入事件

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

格式化问题的原因分析

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

根据前面的分析：

v-model指令设置组成变量。虽然代码在format函数中更改了this.name的值，但是组合标识符阻止this.name的值与输入元素的value属性同步。如果有兴趣，可以修改vue.js的源代码，去掉shouldUpdateValue函数中对构成属性的判断。可以看到输入法还是和以前一样不正常。

格式化问题错误修复

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

方案1:监控变更事件

输入结束并失去焦点后，调用格式化方法，如下所示，或者联机尝试：

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

在输入法组合过程中，不要格式化，如下图，或者在线尝试：

摘要

以上就是边肖介绍的vue表格输入格式化中文输入法的异常问题。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！