InputOnInput——一个实时输入监听的事件

DAGHG • 2025-04-20 13:09 • 编程

在 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 事件，我们可以实现多种实时输入监听的应用。除了上述示例之外，还可以通过此事件实现即时聊天、实时计算预估等应用。在使用该事件时，需要注意兼容性和触发频率，避免触发过于频繁的输入事件导致性能问题。

原创文章，作者：DAGHG，如若转载，请注明出处：https://www.506064.com/n/370335.html