解决oninput事件在中文输入法下会取得拼音的值的问题

wangbjun 发布于2019-08-22 11:21 / 2965人阅读

摘要：简单点描述如下在输入中文或者语音等需要等待一连串的输入的操作之前，事件会触发。在输入中文或者语音等完毕或取消时，事件会触发。在一段中文输入完毕后却并没有在控制台输出任何数据。测试后发现事件是在事件之后触发的。

在做搜索等功能时，很多时候我们需要实时获取用户输入的值，而常常会得到类似 w"m 这样的拼音。为了解决这个问题，我在网上搜索了下相关问题，发现了两个陌生的事件：compositionstart 和 compositionend。

compositionstart & compositionend

在 MDN 上找到了关于他们的描述，compositionstart 和 compositionend。简单点描述如下：

compositionstart：在输入中文或者语音等需要等待一连串的输入的操作之前，compositionstart 事件会触发。

compositionend：在输入中文或者语音等完毕或取消时，compositionend 事件会触发。

input 和 compositionend 的触发顺序导致的问题

注：以下为 chrome 浏览器下的测试结果，关于其他浏览器请看兼容说明！

和大多数人的想法一样，我考虑使用一个布尔值来判断是否在等待输入法的输入，然后在 input 事件中根据其布尔值决定是否获取输入的值，初始代码如下：

var isInputZh = false;
  
elem.addEventListener("compositionstart", function (e) {
  isInputZh = true;
}, false);
elem.addEventListener("compositionend", function (e) {
  isInputZh = false;
}, false);
elem.addEventListener("input", function (e) {
  if (isInputZh) return;
  var value = this.value;
  console.log(value);
  doSomething(value);
}, false);

嗯。。看起来好像没啥问题，运行后，却有些让人摸不着头脑。在一段中文输入完毕后却并没有在控制台输出任何数据。嗯。。测试后发现 compositionend 事件是在 input 事件之后触发的。

解决方法

最后只能用常规方法去解决：在 compositionend 和 input 事件中都得加入对输入值的处理。代码如下：

var isInputZh = false;
var search = document.querySelector("input");

search.addEventListener("compositionstart", function (e) {
  isInputZh = true;
}, false);
search.addEventListener("compositionend", function (e) {
  isInputZh = false;

  doSomething(search.value);
}, false);
search.addEventListener("input", function (e) {
  if (isInputZh) return;
  var value = this.value;

  doSomething(value);
}, false);

关于兼容说明

以上测试是在 chrome 浏览器下进行的，在 Firefox 和 Edge 浏览器下发现 input 事件在 compositionend 事件之后触发，且在输入数字时发现 Firefox 和 Edge 也会触发 compositionend 事件，以上内容仅在 chrome 浏览器中适用。

写在最后

原文发在 github。如果大家有什么好的解决方案欢迎在评论中提出。

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

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

解决oninput事件在中文输入法下会取得拼音的值的问题

摘要：简单点描述如下在输入中文或者语音等需要等待一连串的输入的操作之前，事件会触发。在输入中文或者语音等完毕或取消时，事件会触发。在一段中文输入完毕后却并没有在控制台输出任何数据。测试后发现事件是在事件之后触发的。在做搜索等功能时，很多时候我们需要实时获取用户输入的值，而常常会得到类似 wm 这样的拼音。为了解决这个问题，我在网上搜索了下相关问题，发现了两个陌生的事件：compositio...

gclove 2019-08-01 18:16 评论0 收藏0
说一说限制字数的输入框踩的坑

摘要：所以最后牺牲了下用户体验，找到了一个折中的方式输入框失去焦点时即，或者用户输入回车键时才进行内容长度的检测。当然如果发现输入框内容超过限制，要将光标停留在输入框内，方便用户进行修改。前言最近产品需要做不少输入框，产品想要的交互效果是：用户可以输入中英文，随着用户输入能实时显示已经输入的字符个数，当超过数量限制时输入框边框变红，同时给用户提示信息。这交互听起来没啥问题，技术实现上似...

luck 2019-08-21 14:16 评论0 收藏0
工作手记之移动端中文输入法触发oninput事件的解决方法

摘要：经过在网上的查找，找到了和两个事件进行一个开关判断。关于事件是的标准事件，对于检测和这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像事件需要失去焦点才触发。补充最近测试了下发现在事件之后才触发。。。事件背景工作过程中涉及到了移动端输入内容长度的限定，这就要求需要对输入过程中内容的变化进行监控和判定，以决定是否可以继续输入，所以就想着是否可以在相关输入处监听...

姘存按 2019-08-20 12:21 评论0 收藏0
动态监听输入框值的变化

摘要：以上事件是键盘事件，但是当使用作为监听事件时，会发现一些复制粘贴等操作用不了。二输入框事件和都是事件对象，当输入框的值发生改变时触发该事件。不同的是，是在值改变时立即触发，而是在值改变后失去焦点才触发，并且可以用在非输入框中，如等。一、键盘事件 1.onkeydownonkeydown 事件会在用户按下一个键盘按键时发生。2.onkeypress onkeypress 事件会在键盘按...

missonce 2019-08-26 11:58 评论0 收藏0