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 相关文章推荐
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 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+ajax 无刷新删除数据
2010/02/20 PHP
php中stdClass的用法分析
2015/02/27 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
PHP实现微信退款功能
2018/10/02 PHP
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
JS中数据结构之栈
2019/01/01 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
详解vue路由
2020/08/05 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
9种python web 程序的部署方式小结
2014/06/30 Python
python中星号变量的几种特殊用法
2016/09/07 Python
Django实现组合搜索的方法示例
2018/01/23 Python
python opencv之SIFT算法示例
2018/02/24 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
软件测试面试题
2014/01/05 面试题
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
草船借箭教学反思
2014/02/03 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
员工自我评价范文
2015/03/11 职场文书
遗嘱范文
2015/08/07 职场文书
2016年少先队活动总结
2016/04/06 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
Python实现文字pdf转换图片pdf效果
2022/04/03 Python