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开发技术大全-第3章 js数据类型
Jul 03 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
Javascript实现字数统计
Jul 03 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
浅谈js闭包理解
Apr 01 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
js实现掷骰子小游戏
Oct 24 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版(3)
2006/10/09 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
Python 正则表达式入门(中级篇)
2016/12/07 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
Python实现的购物车功能示例
2018/02/11 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
python之拟合的实现
2019/07/19 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
如何让Java程序执行效率更高
2014/06/25 面试题
小学数学课题方案
2014/06/15 职场文书
教师节倡议书
2014/08/30 职场文书
文明单位创建材料
2014/12/24 职场文书
处级干部考察材料
2014/12/24 职场文书
2015年保管员工作总结
2015/04/30 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS