你不知道的DOM輸入事件

時間  2020-03-08
標籤 不知道 dom 輸入 事件 欄目 HTML 简体版
原文   原文鏈接

測試代碼簡單到嚇人，甚至於事件均可以寫在一個字符串裏，用空格分開，不過我以爲太長了很差看，測試瀏覽器爲Chrome 80。javascript

<!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裏跟輸入有關的事件。
html

事件概覽

若是你還不知道DOM了事件的基礎知識，那麼是時候先補一下了。java

跟輸入有關的事件大體有以下，全部事件都注意大小寫，否則準備好懷疑人生瀏覽器

  • input測試

  • changeui

  • keydownspa

  • keypress3d

  • keyupcode

  • textInputcdn

  • 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()纔會阻止住內容輸入到輸入框裏。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程