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

最新推荐文章于 2024-08-16 19:02:09 发布

一只理智恩

最新推荐文章于 2024-08-16 19:02:09 发布

阅读量266

点赞数 3

分类专栏： js 前端文章标签： javascript html5 前端

本文链接：https://blog.csdn.net/qq_53742640/article/details/136598313

版权

js 同时被 2 个专栏收录

17 篇文章 2 订阅

订阅专栏

前端

16 篇文章 0 订阅

订阅专栏

文章讲述了如何修改JavaScript代码，以避免在用户中文输入法使用过程中未选择中文字符时触发`搜索`函数。通过添加`compositionstart`和`compositionend`事件监听器，只在中文输入开始和结束时执行搜索，从而实现精确控制。

摘要由CSDN通过智能技术生成

这是基本结构

<!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>

完美解决