input 事件与汉字输入法:使用compositionend事件解决
input 事件与汉字输入法:使用compositionend事件解决
在使用<input type="text">
的input事件的时候 会遇到中文输入法的“bug”,比如:
依次输入“喜茶”触发的事件中 data的值很诡异,只有当最终点击了空格之后 才是我们期望的值。这种情况下就需要借助 compositonstart compositonend
这两个事件。
按下的按键 | 出现的结果 |
---|---|
x | 1、2 |
i | 3 |
c | 4 |
h | 5 |
a | 6 |
空格 | 7、8 |
code:
<input type="text" class="input">
function checkLength(val) {
return val.length > 3;
}
let input = document.querySelector('input');
input.addEventListener('input', function (event) {
console.log('input', checkLength(event.target.value), event);
});
input.addEventListener('compositionstart', function (event) {
console.log('compositionstart', checkLength(event.target.value), event);
});
input.addEventListener('compositionend', function (event) {
console.log('compositionend', checkLength(event.target.value), event);
});
逻辑为:验证输入框中输入的字符数是否 >3 个,可以看到虽然汉字“喜茶”没有超过,但是在输入汉字的过程中是不符合条件的。那么我们要做的是在输入汉字的过程中不触发input,而在按空格键的时候才做校验。
还要注意到上图中input事件总是先于compositionend,如果要在input事件中做一些操作,那么在 compositionend中也要重复调用一下。
function checkLength(val) {
return val.length > 3;
}
let inputLock = false;
let input = document.querySelector('input');
input.addEventListener('input', function (event) {
if (inputLock) {
return;
}
// 在输入汉字的情况下这一句不会执行,因为input事件总是先于compositionend
console.log('input', checkLength(event.target.value), event);
// doSomething();
});
input.addEventListener('compositionstart', function (event) {
inputLock = true;
console.log('compositionstart', checkLength(event.target.value), event);
});
input.addEventListener('compositionend', function (event) {
inputLock = false;
console.log('compositionend', checkLength(event.target.value), event);
// doSomething(); // 如果要在input事件中做一些操作,那么在 compositionend中也要重复调用一下
});
reference
element fe
input 事件与汉字输入法:使用compositionend事件解决的更多相关文章
- input事件以及中文输入法的处理
在项目的开发过程中,相信大家都处理过监听用户输入的事情,一般我们会用到onkeyup.onkeydown.onkeypress.onchange.oninput事件,虽然都很熟悉了,但是还是有必要巩固 ...
- 解决oninput事件在中文输入法下会取得拼音的值的问题
在做搜索等功能时,很多时候我们需要实时获取用户输入的值,而常常会得到类似 w'm 这样的拼音.为了解决这个问题,我在网上搜索了下相关问题,发现了两个陌生的事件:compositionstart 和 c ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
- JS改变input的value值不触发onchange事件解决方案 (转)
方法(一)(转载的网络资料) 需要了解的知识 首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onprope ...
- input的type=file触发的相关事件
与input相关的事件运行的过程.添加了一些相关的方法测试了一下.input的type=file的运行流程. 我们书写了mousedown,mouseup,click,input,change,foc ...
- input弹出的手机键盘搜索事件
一.input的搜索框 在input标签里面把type设置为search就可以了.弹出的手机键盘回车键也会变成搜索或者是搜索的图标. <input id="search" ...
- [Android]通过adb shell input上报命令模拟屏幕点击事件【转】
本文转载自:http://blog.csdn.net/yuanzihui/article/details/52871652 常用的 input上报命令: input text 1234 实际向界面注入 ...
- 解决IOS safari在input focus弹出输入法时不支持position fixed的问题
该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...
- Javascript事件模型系列(一)事件及事件的三种模型
一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...
随机推荐
- WPF DEV实现手风琴效果
说明 最近用WPF+DevExpress做项目时,需要做一个类似手风琴的效果,效果的界面如下.因为没有现成的控件,需要自定义模板,所以写了一个Demo和大家分享,项目中可以根据实际情况使用.如果你用不 ...
- 3_SQL Server通过代码的方式添加数据
--通过代码添加数据 --第一种方式--insert into 表名(列名1,列名2,...)values (值1,值2,...)insert into Department(DepName, Dep ...
- 利用百度地图API和群蚁算法,对TSP问题进行模拟与求解
前言 最近由于换了工作,期间也有反思和总结上家公司的得失,总觉得有什么事情当初可以完成或者完成得更好,其中TSP问题就是其中之一.当初在开发一个仓配系统的时候,有一个线路排程的需求,当时自己简单在纸上 ...
- asp.net MVC下使用rest
前言 最近做了下个MVC的项目,需要用到rest接口,与java写的应用程序通信,包括数据的接收和发送,那么我将用实用的角度来全面的讲解一下它的使用方法 一.创建rest服务 首先创建一个Asp.Ne ...
- C# yield return用法
本文实例讲述了C#中yield return用法,并且对比了使用yield return与不使用yield return的情况,以便读者更好的进行理解.具体如下: yield关键字用于遍历循环中,yi ...
- 201521123080《Java程序设计》第3周学习总结
1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 2. 书面作 ...
- 201521123045 《JAVA程序设计》第1周学习总结 1
1. 本周学习总结 学习了入门的java知识,知道了jdk.eclipse等基础软件,了解了如何编译最基础的java程序.知道了java的基本原理以及java的几种数据类型.掌握使用简单编译器编写ja ...
- Ubuntu下PHP MySQL环境搭建-upcoming-ChinaUnix博客
编程语言选择php5 , web服务器选择Apache2 ,后台数据库选择MySQL首先安装编译工具, 打开终端 sudo apt-get install build-essential autoco ...
- 201521123056 《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1. 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...
- 201521123040《Java程序设计》第13周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...