【JS】如何避免输入中文拼音时触发input事件

news2024/11/17 11:42:45

现有一段代码，监听input事件。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text">
  <script>
    let ipt = document.querySelector("input")
    function search() {
      console.log("搜索内容：", ipt.value);
    }
    ipt.addEventListener('input', function () {
      console.log('input事件触发');
      search()
    })
  </script>
</body>

</html>

通过控制台可以看到：当输入英文字符时，监听器正常工作。
在这里插入图片描述

但如果输入中文拼音时，通过控制台可以发现，在未确认中文前，每次输入拼音都触发了input事件，在某些场景下会白白浪费性能。

在这里插入图片描述

可以通过监听compositionstart和compositionend两个 「合成事件」，准确获取中文输入结束的时机。

ipt.addEventListener('compositionstart', function () {
  console.log('start');
})
ipt.addEventListener('compositionend', function () {
  console.log('end');
})

在这里插入图片描述

合成事件表示多个字符合成一个单词，比如中文拼音，可以发现英文单词由于不需要合成，所以并不会触发合成事件。

在这里插入图片描述

此时可以在全局定义一个变量，表示是否合成完毕，只有合成完毕后，再进行input事件的回调函数。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text">
  <script>
    let isComposite = false
    let ipt = document.querySelector("input")
    function search() {
      console.log("搜索内容：", ipt.value);
    }
    ipt.addEventListener('input', function () {
      console.log('input事件触发');
      !isComposite && search()
    })

    ipt.addEventListener('compositionstart', function () {
      isComposite = true  // 停止搜索
      console.log('start');
    })
    ipt.addEventListener('compositionend', function () {
      isComposite = false // 可以搜索
      console.log('end');
      search() // end后input事件不会再监听到，需要手动搜索
    })
  </script>
</body>

</html>