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

作者:小圆点时间:2026-10-21 21:08:20浏览:454

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

作者最新文章