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 相关文章推荐
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
JavaScript中string对象
Jun 12 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 Javascript
5个实用的JavaScript新特性
Jun 16 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实现无限级分类实现代码(递归方法)
2011/01/01 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
JavaScript delete操作符应用实例
2009/01/13 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
Python入门篇之编程习惯与特点
2014/10/17 Python
python在控制台输出进度条的方法
2015/06/20 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
房地产广告策划方案
2014/05/15 职场文书
乳制品整治工作方案
2014/05/29 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
违纪开除通知书
2015/04/25 职场文书
环保建议书作文300字
2015/09/14 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL
Python实现双向链表基本操作
2022/05/25 Python
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript