JavaScript 输入事件 - JavaScript 教程

摘要：在本教程中，您将学习关于 JavaScript 输入事件，该事件在 <input>、<select> 和 <textarea> 的值发生改变时触发。

JavaScript 输入事件介绍

input 事件在 <input>、<select> 或 <textarea> 元素的值发生改变时每次触发。

与仅在值提交时触发的 change 事件不同，input 事件在每次值改变时触发。

例如，如果您在 <input> 元素上输入内容，该元素会连续触发 input 事件。然而，change 事件仅在 <input> 元素失去焦点时触发。

以下示例说明了 <input> 元素的 input 事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript input Event Demo</title>
</head>
<body>
    <label for="message">Message</label>
    <input placeholder="Enter some text" id="message" name="message">
    <p id="result"></p>
    <script>
        const message = document.querySelector('#message');
        const result = document.querySelector('#result');
        message.addEventListener('input', function () {
            result.textContent = this.value;
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

工作原理

首先，选择 id 为 message 的 <input> 元素和 id 为 result 的 <p> 元素。
然后，将事件处理程序附加到 <input> 元素的 input 事件。在 input 事件处理程序中，更新 <p> 元素的 textContent 属性。

本教程对您有帮助吗？