InputOnInput——一個實時輸入監聽的事件

在 Web 開發中，有許多種監聽用戶輸入的事件，如 keydown、keyup、input 等。其中 input 事件因其實時性能和兼容性的優勢，被廣泛使用。

一、基本介紹

InputOnInput 是一個實時輸入監聽的事件，每當文本輸入框中的內容改變時就會觸發它。它的監聽對象類似於 input，但是它監聽的是文本的輸入，而不是值的變化。

該事件支持 IE9 及其以上版本以及現代的瀏覽器（包括 Chrome 和 Firefox），在移動端的 Safari 和 Chrome 也得到了支持。

二、語法

<element oninput="myScript" />

或者

object.addEventListener("input", myScript);

其中，element 可以是所有支持輸入事件的 HTML 元素，而 myScript 則是輸入事件發生時需要執行的 JavaScript 代碼。

三、事件屬性

當 input 發生時，會觸發下列事件屬性：

• event.inputType：用於表明輸入事件的類型，有以下幾種取值：
• insertText：表示插入文本；
• deleteContentBackward：表示刪除光標前面一個字符；
• deleteWordBackward：表示刪除光標前面的一個單詞；
• deleteSoftLineBackward：表示刪除光標前面到上一個換行符之間的所有內容；
• deleteHardLineBackward：表示將光標移到前面一行（跨行刪除）；
• insertLineBreak：表示插入換行符；
• insertParagraph：表示插入段落分隔符；
• insertFromPaste：表示通過 Paste 粘貼操作插入內容；
• insertFromDrop：表示通過 Drag and Drop 操作插入內容。
• event.target.value：獲取輸入框中的值。
• event.data：獲取最近插入的字符。
• event.isComposing：表示用戶目前正在進行中的組合事件，如輸入法快捷鍵。

四、應用示例

1、動態顯示輸入字數

<textarea id="textarea" oninput="changeText()"></textarea>
<p id="num"></p>

<script>
  function changeText() {
    var text = document.getElementById("textarea").value;
    var length = text.length;
    document.getElementById("num").innerHTML = "已輸入" + length + "個字符";
  }
</script>

2、實時搜索

<input id="input" oninput="search()"/>
<ul id="list">
  <li>apple</li>
  <li>banana</li>
  <li>orange</li>
  <li>watermelon</li>
</ul>

<script>
  function search() {
    var input = document.getElementById("input").value;
    var list = document.getElementById("list");
    var items = list.getElementsByTagName("li");
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      if (item.innerHTML.indexOf(input) > -1) {
        item.style.display = "block";
      } else {
        item.style.display = "none";
      }
    }
  }
</script>

五、總結

通過 InputOnInput 事件，我們可以實現多種實時輸入監聽的應用。除了上述示例之外，還可以通過此事件實現即時聊天、實時計算預估等應用。在使用該事件時，需要注意兼容性和觸發頻率，避免觸發過於頻繁的輸入事件導致性能問題。