vue 表单输入格式化中文输入法异常问题
v-model 是 vue.js 提供的语法糖,根据不同的表单控件监听不同的事件,实现对表单控件的数据双向绑定。
当控件是 <input> 输入框时,v-model
监听其 input 事件。
如下所示,这两种写法有什么区别吗?
<input :value="name" @input="name = $event.target.value"><input v-model="name">
输入中文格式化问题
表单输入常见需求:对<input>控件输入的内容进行格式化,譬如:转成大写字母。如果输入的值包含中文,格式化就会引起输入法异常。
如下图所示,也可以在线尝试:
如果使用 v-model 指令实现数据双向绑定,就不会出现输入法异常,如下图所示,也可以在线尝试:
上面的问题,可以看出 v-model 不只是给变量赋值,那么,它还做了些什么呢?
v-model 源码分析
本文参考的 vue.js 源代码是 2.5.16
翻看 v-model 源码,可以看到 v-model 关注的仍然是 input 事件:
input 事件绑定的回调代码处理,如下:
这里可以看到,v-model 判断了 composing 属性,当输入法组合没有结束的时候,直接返回,并没有赋值。
composing 属性并不是标准 dom 元素属性,那它是怎么来的呢?
这里可以看出,composing 属性是 vue.js 添加到 dom 节点上的。
那么,是什么地方调用了这2个函数呢?可以看到,在插入dom节点时,vue.js 监听了 compositionstart / compositionend 事件:
compositionstart / compositionend 这2个 dom 事件,浏览器兼容性问题可以查阅 MDN 说明:
源代码中还发现,在是否刷新 dom 属性值时,也用到了 composing 属性:
这里可以看出,在输入法组合过程中,vue.js 变量值的更新亦不会同步到 dom元素的 value 属性。
综上所述:
v-model 实际上是监听了 <input> 控件的 input、compositionstart、compositionend 三个事件,在输入法组合过程中就直接返回不赋值v-model 指令设置了变量 composing,此标识还用于判断是否更新 dom元素的 value 属性
v-model 输入中文触发的事件
从上面源代码分析可知,v-model 绑定 <input> 输入中文时,实际触发的事件如下:
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 指令实现数据双向绑定,就不会出现输入法异常,如下图所示,也可以在线尝试:
由前面的分析可知:
v-model 指令设置了变量 composing,虽然代码在 format 函数里更改了 this.name 的值,但此时 composing 标识阻止了将 this.name 的值同步给 input 元素的 value 属性如果你感兴趣的话,可以修改 vue.js 的源代码,将 shouldUpdateValue 函数里对 composing 属性的判断去掉,可以看到输入法又跟之前一样异常了
格式化问题 bugfix
再次看下文章开头的示例,如果使用 :value, @input 实现数据双向绑定,有两个方案可以解决中文输入异常的问题。
方案一:监听 change 事件
等输入结束失去焦点以后,再调用格式化方法,如下所示,也可以在线尝试:
方案二:监听 input 事件,同时判断输入法组合过程
在输入法组合过程中,不进行格式化,如下所示,也可以在线尝试:
总结
以上所述是小编给大家介绍的vue 表单输入格式化中文输入法异常问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- dedecms清空所有文章怎么操作?sql语句如何写?
- .NET Core 实战笔记2-从命令开始
- 【译】使用Docker Compose一条指令配置Mesos
- 【译】Windows下的Docker Machine - 如何设置你的Docker主机
- 史上最透彻的KMP算法讲解
- 【译】助你成功搭建云应用的12条方法
- 你能用微信小程序打开小程序了【附开发方法】
- Logistic回归实战篇之预测病马死亡率(一)
- 腾讯游戏DBA利刃 - SQL审核工具介绍
- Logistic回归实战篇之预测病马死亡率(二)
- Windows环境下跑通Truffle开发环境
- Logistic回归实战篇之预测病马死亡率(三)
- 如何将finecms链接URL中的list和show去掉
- Solidity语法知识点(文末有彩蛋)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用jemalloc对nginx进行优化 By HKL,
- 配置IIS6+PHP5.6+MySQL5 By HKL,
- haproxy与nginx集成实例 By HKL, Wed
- 通过JavaScript实现HTTP到HTTPS的强制跳转 By HKL,
- 在Windows10 Bash中默认启动其他shell By HKL,
- 基于R的竞争风险模型的列线图
- 安装zabbix的windows系统agent By HKL,
- NetBSD使用sysupgrade工具更新系统 By HKL,
- asterisk服务器的sip、iax2中继对接 By HKL,
- 用Windows10自带PowerShell获取文件Hash(MD5、SHA1/256)值得方法 By H
- 移除Blog对jQuery的依赖 By HKL, Tues
- 通过expect脚本在H3C设备批量执行命令 By HKL,
- 使用python的paramiko加flask模块实现H3C设备实时ssh信息查询 By HKL,
- MotherBoard JCOM to DB9 female By HKL,
- PHP实现根据请求的域名跳转到不同目录 By HKL, T