vue中@input事件输入英文验证，切换中文文输入法验证错乱的解决方法：compositionstart和compositionend事件

最近做需求，遇到一个vue中输入4位英文判断图形验证的问题。就这个问题测试提了六七个bug，实属把握整不会了。下面就最主要的一个问题写一下解决方法：

需求详情：oninput事件输出长度为4位时，判断图形验证码是否正确，并toast.

bug复现：最开始只写了单独的input事件，但是当切换为中文输入法时，每次打字都会判断一次，造成toast多次出现。

解决思路：compositionstart 和 compositionend 判断输入法，当为中文输入法，输入完成之后在判断，当为英文输入法，长度为4就判断。

代码详情：

<input type="text" maxlength="4" id="imgcode"v-model="imgCode" class="code_input" placeholder="请输入图形验证码"@compositionstart="onCompositionStart"@compositionend="onCompositionEnd"@input="checkImgCode()"></input>

vue:

var lock =false;

checkImgCode: function() {

const vm =this;

if(!vm.lock){

if(!vm.imgCode) {

vm.message.initOption('请填写正确图案');

return;

}

}

},

onCompositionStart() {

const vm =this;

vm.lock = true;

},

onCompositionEnd() {

const vm =this;

// 输入中文触发

vm.lock = false;

},

注意：lock 的初始值以及onCompositionStart（）里lock为 true

vue中@input事件输入英文验证，切换中文文输入法验证错乱的解决方法：compositionstart和compositionend事件相关推荐

B、KK中切换系统语言后默认输入法会自动切换到latin输入法
B.KK中切换系统语言后默认输入法会自动切换到latin输入法 [描述] JB.KK中切换系统语言后默认输入法会自动切换到latin输入法,或者系统预置的默认输入法不能生效 [解法] JB解决方案: ...
Linux中su无法切换到目录,linux普通用户su root切换提示没有文件或目录的解决方法...
1. 首先进入单用户模式: 1). ubuntu : 上述情况可以在grub界面选择第二项修复,但没有grub可以参考: 1.重启ubuntu,随即长按shirft进入grub菜单: 2.选择reco ...
JavaScript中的window.close在FireFox和Chrome上不能正常动作的解决方法
原文:JavaScript中的window.close在FireFox和Chrome上不能正常动作的解决方法 JS中关闭窗口的方法window.close()在IE上能够正常动作,而在FireFox和 ...
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法在添加完之后,可以使用 $.parser.parse();这个方法进行处理: (1) 对整个页面重新渲染: $.parser ...
笔记本电脑键盘输入错误如何解决电脑按键错乱的解决方法步骤
笔记本电脑键盘输入错误如何解决电脑按键错乱的解决方法步骤我们的生活中越来越离不开电脑,但在使用电脑的过程中总会遇到各种各样的问题.知识屋致力于给电脑小白朋友们介绍一些简单常用问题的解决方法,这次给 ...
win10Oracle繁体乱码,win10系统切换繁简字体出现乱码的解决方法
win10系统内置微软的输入法,工作中经常会遇到有些软件因为系统繁简不兼容而出现乱码,让人感到很疑惑,有什么办法修复?其实这种问题要解决也简单,下面小编和大家说说win10系统切换繁简字体出现乱码的解 ...
Mac OS 输入adb命令无效(zsh: command not found: adb)的解决方法
Mac OS 输入adb命令无效(zsh: command not found: adb)的解决方法出现这个问题大概率是因为Android环境未配置或者未生效,需要配置Android环境变量才能执行 ...
苹果7设置不显示网络连接服务器,苹果ios7.1验证失败因为您不再连接到互联网解决方法...
接下来带给大家的是ios7.1验证失败因为您不再连接到互联网解决方法,有很多果粉在升级ios7.1的过程中遇到了"ios7.1验证失败,因为您不再连接到互联网"提示,这是为什么? ...
在小皮面板中使用cmd进入mysql命令，包含mysql错误unknown variable ‘secure_file_priv‘解决方法（超详细）
在小皮面板中使用cmd进入mysql命令,包含mysql错误unknown variable 'secure_file_priv'解决方法(超详细) 先按win+r键打开运行对话框,输入cmd,进入: ...

vue中@input事件输入英文验证，切换中文文输入法验证错乱的解决方法：compositionstart和compositionend事件

vue中@input事件输入英文验证，切换中文文输入法验证错乱的解决方法：compositionstart和compositionend事件相关推荐

最新文章

热门文章