你不知道的DOM输入事件

大家说名字要取得很长很长
1,969 阅读4分钟

测试代码简单到吓人，甚至于事件都可以写在一个字符串里，用空格分开，不过我觉得太长了不好看，测试浏览器为Chrome 80。

<!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 id="input" />
    <script>
      const input = document.getElementById("input");
      input.addEventListener("input", function(e) {
        console.log("input", e);
      });
      input.addEventListener("change", function(e) {
        console.log("change", e);
      });
      input.addEventListener("textInput", function(e) {
        console.log("textInput", e);
      });
      input.addEventListener("keydown", function(e) {
        console.log("keydown", e);
      });
      input.addEventListener("keyup", function(e) {
        console.log("keyup", e);
      });
      input.addEventListener("keypress", function(e) {
        console.log("keypress", e);
      });
      input.addEventListener("compositionend", function(e) {
        console.log("compositionend", e);
      });
    </script>
  </body>
</html>

针对输入框，我们知道最常见的两个事件是input和change，change是在回车确认或者输入框失去焦点的时候触发，这估计是大多数人所知道的关于输入的事件了。下面我们再深入的挖掘一下在DOM里跟输入有关的事件。

事件概览

如果你还不知道DOM了事件的基础知识，那么是时候先补一下了。

跟输入有关的事件大致有如下，所有事件都注意大小写，不然准备好怀疑人生

  • input

  • change

  • keydown

  • keypress

  • keyup

  • textInput

  • compositionend

输入英文

依次触发如下事件

  1. keydown

  2. keypress

  3. textInput

  4. input

  5. keyup

  6. change（如果失去焦点）

看一下keypress的，选它做代表来代表其他key操作的事件


再看一下textInput


最后看一下input的

change里是不含输入内容的


输入拼音

切换到拼音输入法，假如现在我们想要输入一个“你”字，在输入"N"、"I"后先停下来


  1. 输入过程中，keydown和keyup居然没有成对，出现一个很奇怪key("Process")的keyup事件

  2. 过程中，没有出现textInput事件

  3. 出现了input事件，并且data可能不是单个的字符，比如会是"ni"，并且inputType是叫insertCompositionText

此时如果输入空格完成中文输入


  1. 输入完成后有textInput事件，并且data为最终的中文字符

  2. 输入完成后有input事件，并且data为最终的中文字符

  3. 第一次出现了compositionend事件，它代表了中文的输入完成，data为最终的中文字符，后面还会再见到它

  4. keyup事件最后出现，一如既往的还是有Process这个特殊的keyup

但如果是输入回车，仅输入英文


  1. 输入完成后有textInput事件，并且data为最终的英文字符

  2. 输入完成后有input事件，并且data为最终的英文字符

  3. 还是有compositionend件的，data为最终的英文字符

  4. keyup只出现了一次

  5. 由于按下了回车，最后触发了一下change事件

如果是鼠标点一下失去焦点，使得输入英文


  1. 无论如何compositionend事件都会出来，带的还是最终的英文字符

  2. 失去焦点也触发了change事件

以上整个过程都没有触发keypress事件。

最后我们看一个一口气输入"你好"这个中文词语的事件过程


回格删除

点击一下回格删除的按钮，我们可以看到触发的事件顺序如下，注意并没有触发textInput事件

  1. keydown

  2. input

  3. keyup

并不会触发textInput事件，在key相关的事件中，可以看到识别出Backspace键


在input事件中，data属性为null，但是inputType能识别出deleteContentBackward


回车确认

在没有输入任何内容的情况下直接按回车，此时触发的事件顺序是

  1. keydown

  2. keypress

  3. keyup

在输入改变内容后按下回车，此时触发的事件顺序是

  1. keydown

  2. keypress

  3. change

  4. keyup

看一下change事件中回传的event吧


粘贴输入

通过粘贴也能在文本框中输入内容，用快捷键粘贴依次触发的事件是

  1. keydown

  2. keydown

  3. textInput

  4. input

  5. keyup

  6. keyup

  7. change（如果失去焦点）

如果使用鼠标右键粘贴，那么不会触发跟key有关的事件，重点看一下textInput和input里回传了哪些内容

在textInput里，data里是粘贴的内容，type是textInput


在input里，data是null，但有inputType为insertFromPaste


拖动输入

拖动字符串内容也能完成输入，比较有趣，依次触发

  1. textInput

  2. input

看一下textInput，带有内容


再看一下input，能精确识别出是拖动输入的


阻止输入

直接给出结论了，在用addEventListen方法也即是DOM2事件代码的前提下，只有keydown、keypress、textInput三种事件处理里调用event.preventDefault()才会阻止住内容输入到输入框里。


avatar
文章
阅读
粉丝