阅读 1123

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

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

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

输入中文格式化问题

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

使用 :value, @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 实现数据双向绑定,有三个方案可以解决中文输入异常的问题。

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

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

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

关注下面的标签,发现更多相似文章
评论