[vue] 表单输入格式化，中文输入法异常

ゝ一纸荒年。 2022-01-19 01:57 245阅读 0赞

v-model 是 vue.js 提供的语法糖，根据不同的表单控件监听不同的事件，实现对表单控件的数据双向绑定。当控件是`<input>`输入框时，v-model 监听其 input 事件。如下所示，这两种写法有什么区别吗？

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

## 输入中文格式化问题 ##

表单输入常见需求：对`<input>`控件输入的内容进行格式化，譬如：转成大写字母。如果输入的值包含中文，格式化就会引起输入法异常。现在使用上述两种写法来实现，示例如下：

使用 :value, @input - 输入法异常，如下图所示，也可以[在线尝试][Link 1]：

使用 v-model 指令 - 输入法正常，如下图所示，也可以[在线尝试][Link 2]：

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

## v-model 源码分析 ##

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

翻看 v-model 源码，可以看到 v-model 关注的仍然是 [input 事件][input]：

input 事件绑定的[回调代码][Link 3]处理，如下：  
  
这里可以看到，v-model 判断了 composing 属性，当输入法组合没有结束的时候，直接返回，并没有赋值。

[composing 属性][composing]并不是标准 dom 元素属性，那它是怎么来的呢？  
  
这里可以看出，composing 属性是 vue.js 添加到 dom 节点上的。

那么，是什么地方调用了这2个函数呢？可以看到，在插入dom节点时，vue.js 监听了 [compositionstart / compositionend 事件][compositionstart _ compositionend]：  
  
compositionstart / compositionend 这2个是 dom 原生事件，浏览器兼容性问题可以查阅 MDN 说明：

*  [compositionstart 事件][compositionstart]
 *  [compostionend 事件][compostionend]

源代码中还发现，在[是否刷新 dom 属性值][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 指令实现数据双向绑定，就不会出现输入法异常，如下图所示，也可以[在线尝试][Link 2]：

由前面的分析可知：

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

## 格式化问题 bugfix ##

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

方案一：改用 v-model  
v-model 已经处理了中文输入法组合的问题，直接用就好啦，如下所示，也可以[在线尝试][Link 4]：

方案二：监听 change 事件  
等输入结束失去焦点以后，再调用格式化方法，如下所示，也可以[在线尝试][Link 5]：

方案三：监听 input 事件，同时判断输入法组合过程  
在输入法组合过程中，不进行格式化，如下所示，也可以[在线尝试][Link 6]：

转载于:https://juejin.im/post/5b0e14c36fb9a00a353dd66d

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fcodepen.io%2Fmichole%2Fpen%2FgKYVyM%3Feditors%3D1010
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fcodepen.io%2Fmichole%2Fpen%2FvrYLBv%3Feditors%3D1010
[input]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fvuejs%2Fvue%2Fblob%2F25342194016dc3bcc81cb3e8e229b0fb7ba1d1d6%2Fsrc%2Fplatforms%2Fweb%2Fcompiler%2Fdirectives%2Fmodel.js%23L147-L152
[Link 3]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fvuejs%2Fvue%2Fblob%2F25342194016dc3bcc81cb3e8e229b0fb7ba1d1d6%2Fsrc%2Fplatforms%2Fweb%2Fcompiler%2Fdirectives%2Fmodel.js%23L154-L165
[composing]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fvuejs%2Fvue%2Fblob%2Ff7ca21eab1e0d661945aa6070fc988028c90966f%2Fsrc%2Fplatforms%2Fweb%2Fruntime%2Fdirectives%2Fmodel.js%23L130-L139
[compositionstart _ compositionend]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fvuejs%2Fvue%2Fblob%2Ff7ca21eab1e0d661945aa6070fc988028c90966f%2Fsrc%2Fplatforms%2Fweb%2Fruntime%2Fdirectives%2Fmodel.js%23L36-L48
[compositionstart]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FEvents%2Fcompositionstart
[compostionend]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FEvents%2Fcompositionend
[dom]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fvuejs%2Fvue%2Fblob%2F60da366a2653a3984d79331d02ebb2ecf7e73a9a%2Fsrc%2Fplatforms%2Fweb%2Fruntime%2Fmodules%2Fdom-props.js%23L56-L62
[Link 4]: https://link.juejin.im?target=https%3A%2F%2Fcodepen.io%2Fmichole%2Fpen%2FYvPbEP%3Feditors%3D1010
[Link 5]: https://link.juejin.im?target=https%3A%2F%2Fcodepen.io%2Fmichole%2Fpen%2FjKOWwy
[Link 6]: https://link.juejin.im?target=https%3A%2F%2Fcodepen.io%2Fmichole%2Fpen%2FYvzYrM%3Feditors%3D1010