监听输入框的实时变化的解决方案

Author : lovecicy

在做文本输入的时候,会碰到需要检测输入框实时变化的事件。除了blur、keyup、keydown事件,并不能完全满足我们的要求,比如用户持续按一个键,只会触发一个keydown事件,但是会输入很多字符。这时候就需要用到oninput和onpropertychange事件了。

oninput是HTML5标准事件,但是旧版的IE(<IE9)并不支持,不过IE也提供了专有的onpropertychange事件来监听输入框的变化。

oninput事件在检测 textarea, input:text, input:password 和 input:search 这几个元素内容变化时非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。

各浏览器对oninput的支持情况:

Chrome (yes) | FireFox 2 | IE9 | Opera 10 | Safari (yes)

用jQuery实现的代码如下:

$(selector).bind('input propertychange', function() {
    //do something
});

不过,这两个事件在 IE9 中都有个小BUG,那就是通过右键菜单菜单中的剪切和删除命令删除内容的时候不会触发,而 IE 其他版本都是正常的,目前还没有很好的解决方案。不过 oninput & onpropertychange 仍然是监听输入框值变化的最佳方案,如果大家有更好的方法,还请不吝赐教。

standard
  1. luckyGirl - 2014 年 4 月 30 日 12:43 下午

    onpropertychange 除了值,连输入框的其他属性改变也会触发,貌似挺好性能 不过也没别的招了

    回复

Have your say