oninput 事件与onchange

最新推荐文章于 2025-06-29 21:45:00 发布

原创最新推荐文章于 2025-06-29 21:45:00 发布 · 1.0k 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了HTML中oninput事件的应用及特点。通过一个简单的示例，展示了如何使用JavaScript监听输入框内容的变化，并即时给出反馈。文章对比了oninput与onchange事件的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当用户向 <input> 中尝试输入时执行 JavaScript：

<p>该实例演示了如何向 input 元素中添加 "oninput" 事件。</p>
<p>向文本框中尝试输入即可触发事件。</p>
输入您的名字: <input type="text" value="Mickey" oninput="myFunction()">
<script>
function myFunction() {
    alert("input 输入框值已发生变化。");
}
</script>

<p style="border: 0px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; line-height: 2em; font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(51, 51, 51);">oninput 事件在用户输入时触发。<span style="line-height: 2em;">该事件在 <input> 或 <textarea> 元素的值发生改变时触发。</span></p><span style="color: rgb(51, 51, 51); font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 24px;"> oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。</span>