jQuery实时监听input value变化的多种方案对比
本文介绍在jQuery中实时监听input元素value变化的几种方法。对比了onchange需失焦且由用户操作触发的特性,IE专属的onpropertychange在属性改变时立即触发,以及跨浏览器的oninput仅对value变化生效。通过示例代码展示如何在不同浏览器环境下实现实时值监听。
jQuery实时监听input value变化的方案对比
具体实现示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body id="lia-body">
<div class="lia-content">
<div class="inputwrapper">
<label><span>姓名:</span><input type="text" name="fullname"></label>
<div class="result"></div>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
var $inputwrapper = $('#lia-body .lia-content .inputwrapper');
$inputwrapper.find('input').on('input propertychange',function(){
var result = $(this).val();
console.log(result);
$inputwrapper.find('.result').html(result);
});
})
</script>
</body>
</html>
使用onchange事件触发监听,需要同时满足两个条件:
1)当前对象的属性发生更改,且该更改是由键盘输入或鼠标操作引起的(通过脚本修改属性不会触发);
2)当前对象失去焦点(触发onblur事件);
onpropertychange事件
只要当前对象的属性发生变化,该事件就会立即触发,但该事件仅适用于IE浏览器;
oninput事件是onpropertychange在非IE浏览器(如Firefox和Opera)中的对应实现;
两者的区别在于,oninput在绑定到对象时,并非所有属性变化都会触发事件,只有当对象的value值发生改变时才会生效。
因此,使用oninput来监听input元素的value变化是非常合适的选择。
以上就是jQuery实时监听input value变化的相关介绍,希望能为读者提供参考,感谢支持。
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型:HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部:scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09
