jQuery实时监听input value变化的多种方案对比

作者：小圆点

时间：2026-10-21

本文介绍在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变化的相关介绍，希望能为读者提供参考，感谢支持。