input中文输入法导致的高频事件

这是基本结构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>中文输入法的高频事件</title></head><body><input type="text" class="txt" /><script>var inp = document.querySelector("input");function search() {console.log("搜索:" + inp.value);}inp.addEventListener("input", function () {search();});</script></body>
</html>

输出：

发现在中文还没选中就触发了，现在希望没选中不要触发

改写代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>中文输入法的高频事件</title></head><body><input type="text" class="txt" /><script>var inp = document.querySelector("input");function search() {console.log("搜索:" + inp.value);}inp.addEventListener("input", function () {search();});inp.addEventListener("compositionstart", () => {console.log("中文输入开始");});inp.addEventListener("compositionend", () => {console.log("中文输入结束");});</script></body>
</html>

打印结果：

我们要做的是从开始到结束中间的过程过滤掉，不触发搜索

直接上代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>中文输入法的高频事件</title></head><body><input type="text" class="txt" /><script>var inp = document.querySelector("input");function search() {console.log("搜索:" + inp.value);}let isComposition = false;inp.addEventListener("input", function () {if (isComposition) {return;}search();});inp.addEventListener("compositionstart", () => {isComposition = true;console.log("中文输入开始");});inp.addEventListener("compositionend", () => {isComposition = false;console.log("中文输入结束");search();});</script></body>
</html>

完美解决

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/734556.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！