实时监听输入框值变化的完美方案：oninput & onpropertychange

偏执的太偏执、 2022-09-18 01:45 303阅读 0赞

在 [**Web**][Web] 开发中经常会碰到需要动态监听输入框值变化的情况，如果使用  onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话，监听不了右键的复制、剪贴和粘贴这些操作，处理组合快捷键也很麻烦。因此这篇文章向大家介绍一种完美的解决方案：结合 [**HTML5**][HTML5] 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。

oninput 是 [**HTML5**][HTML5] 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。[**oninput**][oninput] 事件在主流浏览器的兼容情况如下：

![2012112817534430.jpg][]

从上面表格可以看出，[**oninput**][oninput] 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况：

*  修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。
 *  修改了 input:text 或者 textarea 元素的值，value 属性发生变化。
 *  修改了 select 元素的选中项，selectedIndex 属性发生变化。

在监听到 [**onpropertychange**][oninput] 事件后，可以使用 event 的 propertyName 属性来获取发生变化的属性名称。

集合 oninput & onpropertychange 监听输入框内容变化的示例代码如下：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;head&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>function</code> 
      <code>OnInput (event) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert (</code> 
      <code>"The new content: "</code> 
      <code>+ event.target.value);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// Internet Explorer</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>function</code> 
      <code>OnPropChanged (event) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(event.propertyName.toLowerCase () == </code> 
      <code>"value"</code> 
      <code>) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert (</code> 
      <code>"The new content: "</code> 
      <code>+ event.srcElement.value);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>} </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/script&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/head&gt;</code> 
     </div> 
     <div> 
      <code>&lt;body&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>Please modify the contents of the text field.</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;input type=</code> 
      <code>"text"</code> 
      <code>oninput=</code> 
      <code>"OnInput (event)"</code> 
      <code>onpropertychange=</code> 
      <code>"OnPropChanged (event)"</code> 
      <code>value=</code> 
      <code>"Text field"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/body&gt;</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

使用 [**jQuery**][jQuery] 库的话，只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了，示例代码如下：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>$(</code> 
      <code>'textarea'</code> 
      <code>).bind(</code> 
      <code>'input propertychange'</code> 
      <code>, </code> 
      <code>function</code> 
      <code>() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>'.msg'</code> 
      <code>).html($(</code> 
      <code>this</code> 
      <code>).val().length + </code> 
      <code>' characters'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

下面是 [**JsFiddle**][oninput] 在线演示，如果不能显示请刷新一下页面或者点击后面的链接（[http://jsfiddle.net/PVpZf/][http_jsfiddle.net_PVpZf]）：

最后需要注意的是：[**oninput**][oninput] 和 [**onpropertychange**][oninput] 这两个事件在 IE9 中都有个小BUG，那就是通过右键菜单菜单中的剪切和删除命令删除内容的时候不会触发，而 IE 其他版本都是正常的，目前还没有很好的解决方案。不过 oninput & onpropertychange 仍然是监听输入框值变化的最佳方案，如果大家有更好的方法，欢迎参与讨论。

**参考资料：**

*  [《oninput event (Internet Explorer)》][oninput event _Internet Explorer]
 *  [《oninput event | input event》][oninput event _ input event]
 *  [《HTML5 Input Event Handlers and User-Experience》][HTML5 Input Event Handlers and User-Experience]
 *  [《onpropertychange event | propertychange event》][onpropertychange event _ propertychange event]
 *  [《A HTML5 Browser maze, oninput support》][A HTML5 Browser maze_ oninput support]

[Web]: http://www.cnblogs.com/lhb25/category/279316.html
[HTML5]: http://www.cnblogs.com/lhb25/category/146076.html
[oninput]: http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html
[2012112817534430.jpg]: /images/20220828/888344023be045648522401c3b481e15.png
[jQuery]: http://www.cnblogs.com/lhb25/category/277997.html
[http_jsfiddle.net_PVpZf]: http://jsfiddle.net/PVpZf/
[oninput event _Internet Explorer]: http://msdn.microsoft.com/en-us/library/ie/gg592978%28v=vs.85%29.aspx#feedback
[oninput event _ input event]: http://help.dottoro.com/ljhxklln.php
[HTML5 Input Event Handlers and User-Experience]: http://girliemac.com/blog/2011/11/27/html5-input-events/
[onpropertychange event _ propertychange event]: http://help.dottoro.com/ljufknus.php
[A HTML5 Browser maze_ oninput support]: http://danielfriesen.name/blog/2010/02/16/html5-browser-maze-oninput-support/