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