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 表单输入格式化中文输入法异常问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
优雅的处理vue项目异常实战记录
背景 你还在为处理Uncaught (in promise) ReferenceError烦恼吗? 你还在为捕获异常反复的写try catch吗? 你还在为每一个promise写catch吗? 是时候一站式统一处理异常!!!(针对vue项目) 全局异常捕获 Vue.config.errorHandler = function (err, vm, info) { // 指定组件的渲染和观察期间未捕获错误的处理函数.这个处理函数被调用时,可获取错误信息和 Vue 实例. // handle erro
-
vue 项目build错误异常的解决方法
在生成vue项目的时候,出现如下错误 ERROR in static/js/index.d66d806fcdd72b36147b.js from UglifyJs Unexpected token: punc (() [src/components/Hello.vue:26,0][static/js/index.d66d806fcdd72b36147b.js:34,6] ERROR in static/js/cell.89bb6f1195b769a2c949.js from UglifyJs U
-
简单学习5种处理Vue.js异常的方法
错误大全 为了测试各种异常处理技巧,我故意触发三种类型的错误. 第一种:引用一个不能存在的变量: <div id="app" v-cloak> Hello, {{name}} </div> 上述代码运行后不会抛出错误,但是在控制台会有[Vue warn]消息. 111111111111111111 你可以在Codepen查看例子完整代码. 第二种:将变量绑定到一个被计算出来的属性,计算的时候会抛出异常. <div id="app" v-
-
vue 表单输入格式化中文输入法异常问题
v-model 是 vue.js 提供的语法糖,根据不同的表单控件监听不同的事件,实现对表单控件的数据双向绑定. 当控件是 <input> 输入框时,v-model 监听其 input 事件. 如下所示,这两种写法有什么区别吗? <input :value="name" @input="name = $event.target.value"><input v-model="name"> 输入中文格式化问题 表单
-
Vue 表单输入绑定v-model
目录 1.v-model 2.绑定的属性和事件 3.表单元素绑定 3.1 input绑定 3.2 textarea绑定 3.3 checkbox绑定 3.4 radio绑定 3.5 select绑定 4.值绑定 4.1 代码详解 5.修饰符 5.1 .lazy 5.2 .number 5.3 .trim 1.v-model v-model指定可以实现表单值与属性的双向绑定.即表单元素中更改了值会自动的更新属性中的值,属性中的值更新了会自动更新表单中的值 2.绑定的属性和事件 v-model在内部
-
Vue表单输入绑定的示例代码
基础用法 你可以用v-model指令在表单input,textarea以及select元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但是v-model本质上不过是语法糖.它负责监听用户的输入事件以更新数据. v-model会忽略所有表单元素的value, checked, selected特性的初始值而总是将Vue实例的数据作为数据来源.你应该通过JavaScript在组件的data选项中声明初始值. (1) 文本 <input v-model="me
-
Vue.js自定义事件的表单输入组件方法
Vue.js使用自定义事件的表单输入组件 自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定.要牢记: <input v-model="something"> 这不过是以下示例的语法糖: <input v-bind:value="something" v-on:input="something = $event.target.value"> 所以在组件中使用时,它相当于下面的简写: <
-
Vue学习笔记之表单输入控件绑定
表单输入绑定 基础用法 文本 <input v-model:"msg" placeholder="edit me"/> ### 多行文本 <textarea name="" id="" cols="30" rows="10" v-model:"msg"></textarea> ### 复选框 爱好 <input type=&q
-
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
本文实例讲述了vue使用自定义事件的表单输入组件用法.分享给大家供大家参考,具体如下: 自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定. v-model的实现原理 : <input v-model="something"> 这不过是以下示例的语法糖: <input v-bind:value="something" v-on:input="something = $event.target.value&
-
vue表单验证之禁止input输入框输入空格
测试小姐姐让输入框不允许输入空格,安排. 刚开始用的下面这个方法,因为我是电脑端f12的情况下调试移动端,所以下面这个方法可以实现禁止输入空格,于是就打包测试上线了,上线后才发现真机中不支持,应该是pc端和移动端事件不一样,所以如果你是pc端,可以使用下面这个方法. input上添加下方代码(我用的vant也一样,包括elemenui等) @keydown.native="keydown($event)" methods中写入下方代码 methods:{ // 禁止输入空格 keydo
-
详解vue表单——小白速看
一.基本用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定. 但 v-model 本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. v-model 会忽略所有表单元素的 value.checked.selected 特性的初始值而总是将 Vue 实例的数据作为数据来源.你应该通过 JavaScript 在组件的 data 选项中声明初始值. 一组代码,看完text.textarea.
-
Vue表单及表单绑定方法
基础用法 可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. 注: 1.v-model 会忽略所有表单元素的 value.checked.selected 特性的初始值而总是将 Vue 实例的数据作为数据来源.你应该通过 JavaScript 在组件的 data
-
Laravel框架表单验证格式化输出的方法
最近在公司的项目开发中使用到了 laravel 框架,采用的是前后端开发的模式.接触过前后端开发模式的小伙伴应该都知道,后端返回的数据格式需要尽可能搞得保证一致性,这样前端在处理时也方便处理.我们先通过观看下面的两张接口返回的效果图吧,这样或许会更加的直观一些. laravel默认的输出格式(图一) 修改后的输出格式(图二) 或许通过上面两张图,你还是未看出有什么区别的话.这里我用文字描述一下吧. 这种情况是发生在laravel做表单验证的情况下发生的.前端向我后端接口发送一个POST请求时,发