📌  相关文章
📜  HTML | oninput 事件属性(1)

📅  最后修改于: 2023-12-03 15:31:15.031000             🧑  作者: Mango

HTML | oninput 事件属性

介绍

oninput 是一种 HTML 中的事件属性，用于监测输入框中的文本内容是否发生改变。当文本内容发生改变的时候，该事件会被触发。

使用场景

oninput 事件属性常用于以下场景：

  • 实现搜索功能：当用户在搜索框中输入关键词时，实时过滤数据并显示搜索结果；
  • 实现实时计数器：当用户在输入框中输入文字时，实时统计输入的文字数量；
  • 实现验证功能：当用户在输入框中输入内容不符合要求时，实时提示错误信息。
语法
<input type="text" oninput="myFunction()">
示例
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>oninput 事件属性示例</title>
</head>
<body>
    <input type="text" id="inputText" oninput="checkInput()">
    <p id="errorMsg"></p>

    <script>
        function checkInput() {
            var inputValue = document.getElementById("inputText").value;
            var errorElem = document.getElementById("errorMsg");
            
            if (inputValue.length < 5) {
                errorElem.innerHTML = "输入内容必须大于5个字符！";
                errorElem.style.color = "red";
            } else {
                errorElem.innerHTML = "";
            }
        }
    </script>
</body>
</html>
解释

该示例是一个简单的表单验证功能，当用户在输入框中输入的内容少于 5 个字符时，会提示错误信息。具体实现步骤如下：

  1. 在 <input> 标签中添加 oninput 事件属性，指定事件触发时的回调函数 checkInput()；
  2. 在 checkInput() 函数中获取输入框中的值 inputValue，并获取用于显示错误信息的元素 errorElem；
  3. 判断输入框中的内容是否小于 5 个字符，如果是，则将错误信息显示在 errorElem 中；否则，清空 errorElem 的内容。
总结

oninput 事件属性可以帮助我们实现实时响应用户的输入。它可以应用到许多场景中，如搜索框、实时计数器、表单验证等。在开发中，我们可以根据具体需求来使用它，让用户的使用体验更加友好。