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


Posted in Javascript onMay 30, 2018

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

当控件是 <input> 输入框时,v-model 监听其 input 事件。

如下所示,这两种写法有什么区别吗?

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

输入中文格式化问题

表单输入常见需求:对<input>控件输入的内容进行格式化,譬如:转成大写字母。如果输入的值包含中文,格式化就会引起输入法异常。

如下图所示,也可以在线尝试:

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

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

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

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

v-model 源码分析

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

翻看 v-model 源码,可以看到 v-model 关注的仍然是 input 事件:

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

input 事件绑定的回调代码处理,如下:

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

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

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

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

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

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

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

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

compositionstart 事件

compostionend 事件

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

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

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

综上所述:

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

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

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

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

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

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 指令实现数据双向绑定,就不会出现输入法异常,如下图所示,也可以在线尝试:

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

由前面的分析可知:

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

格式化问题 bugfix

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

方案一:监听 change 事件

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

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

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

总结

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

Javascript 相关文章推荐
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
微信小程序异步处理详解
Nov 10 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 Javascript
解决Vue项目中tff报错的问题
Oct 21 Javascript
详解如何使用babel进行es6文件的编译
May 29 #Javascript
基于打包工具Webpack进行项目开发实例
May 29 #Javascript
JavaScript反射与依赖注入实例详解
May 29 #Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 #Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 #Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 #Javascript
Vue 全局loading组件实例详解
May 29 #Javascript
You might like
PHP数组及条件,循环语句学习
2012/11/11 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
php自动获取关键字的方法
2015/01/06 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
YII框架关联查询操作示例
2019/04/29 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
javascript测试题练习代码
2012/10/10 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
python改变日志(logging)存放位置的示例
2014/03/27 Python
python 输出上个月的月末日期实例
2018/04/11 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
python三大神器之fabric使用教程
2019/06/10 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
员工晚婚的请假条
2014/02/08 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
离职感谢信怎么写
2015/01/22 职场文书
中英文求职信范文
2015/03/19 职场文书
母亲去世追悼词
2015/06/23 职场文书