DOM事件学习之兼容中文输入法

jzzlee 发布于2019-08-20 12:21 / 2004人阅读

摘要：写在前面很多同学或许有遇到过这样的场景需要实时得到用户在输入框中输入的内容，很多同学可能第一反应就是监测，这些事件，然后把获取到的内容输出出来可是上述解决方法却会有个问题，就是使用中文输入法时，会出现像这样的内容，这是为什么呢原来，和获取到

写在前面

很多同学或许有遇到过这样的场景：
需要实时得到用户在input输入框中输入的内容，很多同学可能第一反应就是监测keyup，keydown这些事件，然后把获取到的内容输出出来；

可是上述解决方法却会有个问题，就是使用中文输入法时，会出现像 zhong"wen 这样的内容，这是为什么呢？

原来，keyup和keydown获取到的内容只是输入时的内容，而中文输入法需要最好打个空格才能得到打字的结果，这就造成了困扰，获取到的内容不是想要的啊！有木有！！！

不要担心，使用以下这几个事件可以让你对付中文输入法无忧：compositionstart/compositionupdate/compositionend

事件解释

compositionstart
是指中文输入法开始输入触发，每次输入开始仅执行一次，执行的开始是end事件结束了才会触发；

compositonupdate
是指中文输入法在输入时触发，也就是可能得到 zhogn"wen 这种内容，这里返回的内容是实时的；仅在Start事件触发后触发，输入时实时触发；

compositionend
是指中文输入法输入完成是触发；这是得到的结果就是最终输入完成的结果；此事件仅执行一次；

使用

document.addEventListener("compositionstart", function(e) {
    console.log("start:" + e.data);
});

document.addEventListener("compositionstart", function(e) {
    console.log("start:" + e.data);
});

document.addEventListener("compositionend", function(e) {
    console.log("end:" + e.data);
});

结果

参考链接http://frontenddev.org/articl...

专线服务云服务器学习之substr() 深度学习之概要 webrtc学习之九 linux学习之centos

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80935.html

React学习之漫谈React

摘要：事件系统合成事件的绑定方式合成事件的实现机制事件委派和自动绑定。高阶组件如果已经理解高阶函数，那么理解高阶组件也很容易的。例如我们常见的方法等都是高阶函数。对测试群众来说，从质量保证的角度出发，单元测试覆盖率是事件系统合成事件的绑定方式 `Test` 合成事件的实现机制：事件委派和自动绑定。 React合成事件系统的委托机制，在合成事件内部仅仅是对最外层的容器进行了绑定，并且依赖...

darkbug 2019-08-23 18:38 评论0 收藏0
Java培训学习之Java开源软件的汇总

摘要：开源软件的汇总开源插件是一个类似于的插件，它可以帮助你在不退出的环境下浏览本地文件系统。事件模型支持基于的事件提交。开源容器是一个非侵入式的对象反转控制容器容器。开源插件提供一个可针对文件语法进行着色的编辑器。 Java开源软件的汇总：EcSplorer 【Java开源 Eclipse插件】EcSplorer(Eclips...

qiangdada 2021-11-25 09:43 评论0 收藏0
java第三方包学习之jsoup

摘要：下面隆重介绍简介是一个解析的第三方库，它提供了一套非常方便的，可使用，以及类的操作方法来取出和操作数据。一个文档的对象模型文档由多个和组成其继承结构如下继承继承继承一个包含一个子节点集合，并拥有一个父。前言使用python写爬虫的人，应该都听过beautifulsoup4这个包，用来它来解析网页甚是方便。那么在java里有没有类似的包呢？当然有啦！而且也非常好用。下面隆重介绍jso...

dackel 2019-08-14 17:06 评论0 收藏0
React学习之认识Flux架构模式

摘要：是用户建立客户端应用的前端架构，它通过利用一个单向的数据流补充了的组合视图组件，这更是一种模式而非正式框架，你能够无需许多新代码情况下立即开始使用。结构和数据流一个单向数据流是模式的核心。 Flux是Facebook用户建立客户端Web应用的前端架构，它通过利用一个单向的数据流补充了React的组合视图组件，这更是一种模式而非正式框架，你能够无需许多新代码情况下立即开始使用Flux。 ...

EasonTyler 2019-08-23 18:37 评论0 收藏0
React学习之初入React世界

摘要：语法将语法直接加入到代码中，再通过翻译器装换到纯后由浏览器执行。事实上，并不需要花精力学习。可以说，基本语法基本被囊括了，但也有少许不同。明确的数据流动。这条原则让组件之间的关系变得简单且可预测。使用获取和显示回调。 JSX语法 JSX将HTML语法直接加入到JavaScript代码中，再通过翻译器装换到纯JavaScript后由浏览器执行。在实际开发中，JSX在产品打包阶段都已经编...

cjie 2019-08-23 18:38 评论0 收藏0