JavaScript 实时监听input 中值变化

最新推荐文章于 2023-12-29 23:26:56 发布

星梦野美

最新推荐文章于 2023-12-29 23:26:56 发布

阅读量1.2w

点赞数 2

分类专栏：前端文章标签： javascript html 前端

本文链接：https://blog.csdn.net/belusoi/article/details/123477929

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript的oninput事件实时监听HTML输入元素的值变化，详细对比了oninput与onchange事件的区别。oninput事件在用户输入时立即触发，而onchange事件则在元素失去焦点且内容改变时触发。支持的输入类型包括各种input和textarea标签。通过示例代码展示了如何设置和使用这两个事件。

摘要由CSDN通过智能技术生成

JavaScript 实时监听input 中值变化

在 <input> 标签中，添加属性 oninput ，oninput 事件在元素获得用户输入时发生。
当 <input> 或 <textarea> 元素的值发生改变时，会发生此事件。可以监控的HTML 标签：<input type="color">, <input type="date">, <input type="datetime">, <input type="email">, <input type="month">, <input type="number">, <input type="password">, <input type="range">, <input type="search">, <input type="tel">, <input type="text">, <input type="time">, <input type="url">, <input type="week"> and <textarea>
具体的实现代码
HTML ：

<element oninput="myScript()">

其中element 即上面提到的HTML标签
JavaScript:

<script>
function myScript() {
  alert("The value of the input field was changed.");
}
</script>

值得注意的是该属性和onchange 属性是有着很大的区别的，虽然两者都是在input的内容变化后触发，但是它们的触发机制还是有些许的不一样，oninput 属性在元素的内容改变后立即响应，而onchange 属性则是元素失去焦点（通俗一点理解就是点击了其他的元素），并且元素的内容被改变的情况下才会触发，而且onchange 支持select 标签