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 相关文章推荐
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
使用javascript获取页面名称
Dec 23 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
JS Attribute属性操作详解
May 19 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 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遍历目录viewDir函数
2009/12/15 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
jquery中常用的SET和GET
2009/01/13 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
python实现日常记账本小程序
2018/03/10 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
python手写均值滤波
2020/02/19 Python
Python 如何对文件目录操作
2020/07/10 Python
Python远程linux执行命令实现
2020/11/11 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
初中生评语大全
2014/04/24 职场文书
清洁工个人工作总结
2015/03/05 职场文书
工作试用期自我评价
2015/03/10 职场文书
React实现动效弹窗组件
2021/06/21 Javascript