jQuery - 监听input组件的内容改变，并进行实时响应

2016-10-09 发布：hangge 阅读：14155

在开发中，有时我们需要对 input 的 value 值变化作实时响应。比如文本输入框的实时字数统计功能，要求文本框内容改变时就要触发相关的统计行为。不管这个内容是键盘输入的，还是鼠标粘贴进来的。

1，实现原理
要实现内容实时监听响应，我们需要用到两个监听事件：oninput 事件和 propertychange 事件
（1）oninput
这个是标准浏览器的事件，一般浏览器都支持。当 input 的 value 发生变化时就会发生，无论是键盘输入还是鼠标粘贴的改变都能即时监听到。

（2）propertychange
由于 IE9 以下是不支持的 oninput 事件。这个时候就要用到IE专有的 propertychange 事件。顾名思义，翻译过来叫属性变更事件。这个事件就比较强大了，不仅仅会监听到 input 的value 属性，还包括其他的标签属性。各种属性发生变化都会产生该事件，比如 span 元素的 style 属性改变。同时在事件发生时还可以用 event.propertyName 访问到改变的属性名。

2，样例演示
下面使用 jQuery 做一个字数实时统计功能。当文本框内容改变时，下方会实时统计出当前的字数。

<html>
  <head>
    <title>hangge.com</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script>
      $(document).ready(function(){
        $('#comment').on('input propertychange', function() {
         var count = $(this).val().length;
         $('#tip').html("已输入 "+ count +" 个字。");
        });
      });
    </script>
  </head>
  <body>
    <textarea id="comment" rows="5" cols="50"></textarea>
    <br>
    <div id="tip"></div>
  </body>
</html>