屏蔽进行输入法时的监听事件

最新推荐文章于 2024-07-16 17:18:30 发布

滕笑然

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量156

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/snake3344/article/details/132588827

版权

问题

vue3文档中由于中日韩需要拼音，在输入框输入的时候有可能会出现在拼字的时候也会被监听到

在vue的v-model的输入框中，正常输入字母和汉字可以监听到，但是输入法中的不会监听到，如上图

但是如果直接使用原生的input事件去监听，我们可以发现拼字的时候也会被监听到，我们该怎么去实现他这个功能呢？

<!-- 无法控制监听 -->
<input type="text" class="input" @input="oninput()" id="input1" />
<script>
    var oninput = function (e) {
      console.log("e", e)
      document.querySelector(".text").textContent = e.target.value;
    };
</script>

监听输入法事件

通过MDN我们可以发现一个属性compositionstart compositionend

compositionstart文本合成系统如 input method editor（即输入法编辑器）开始新的输入合成时会触发 compositionstart 事件。

说人话就是你在开始拼字的时候触发这个事件compositionstart,拼字结束的时候调用compositionstart这个事件，于是我们就可以写一个flag，当flag为false就让其输入

      let composition = false;

      let input1 = document.querySelector("#input1");

      input1.addEventListener("compositionstart", (e) => {
        composition = true;
      });
      input1.addEventListener("compositionend", (e) => {
        composition=false
        //此处再调用input因为在你确认字之后，并不会触发这个事件导致字不上屏
        oninput(e)
      })
      var oninput = function (e) {
        if(composition)return
        document.querySelector(".text").textContent = e.target.value;
      };

监听e中的输入法标识（推荐）

这种精简，原理一样，需要再结束的时候再次调用input事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" class="input" @input="oninput()" id="input1" />
    <span class="text">12123</span>
    <script>
      var oninput = function (e) {
        if (e.isComposing) return; // 如果正在进行拼字，直接返回
        console.log("text", document.querySelector(".text").innerText);
        document.querySelector(".text").textContent = e.target.value;
      };

      var input1 = document.querySelector("#input1");
      input1.addEventListener("compositionend", oninput);
    </script>
  </body>
</html>

滕笑然

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
屏蔽进行输入法时的监听事件

在vue的v-model的输入框中，正常输入字母和汉字可以监听到，但是输入法中的不会监听到,但是如果直接使用原生的input事件去监听，我们可以发现拼字的时候也会被监听到，我们该怎么去实现他这个功能
复制链接

扫一扫