传统对于文本框(input)的输入可通过键盘的 onkeydown / onkeypress / onkeyup 来监测,但在处理较多细节时存在诟病比如: cut(剪切) / paste(复制) / undo(撤销) / redo(重做) / drag & drop(拖拽)/ 输入法等。

而 oninput & onpropertychange 事件基本可以解决上面的诟病:

oninput 事件作为 HTML5 中的标准事件,基本除了IE6 / IE7 / IE8 外的最新浏览器均支持(注:1、原先的 Opera 的虽支持,但依然存在部分传统的诟病,从 Opera 11+ 开始,已修复,更加完美;2、IE9 也支持)。

function(input, callback){
    if ("onpropertychange" in input) { //IE6/IE7/IE8
        input.onpropertychange = function(){
            if (window.event.propertyName == "value"){
                callback.call(this, window.event)
            }
        }  
    } else { 
        // Fix Firefox Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=195696
        input.addEventListener("input", callback, false);
    }
}

提示:

  1. oninput 事件:当 JS 改变 value 值或从浏览器的自动下拉提示中选值时,不会触发。
  2. onpropertychange 事件:当 input 设置为不可用(disable=true)时,不会触发。

参考文章:



共有20 条评论

  1. 1. 头像 zythum

    朱一这边用ff测试。的话,
    如果像onXX这种事件属性的话ff如果没有定义的话,值是是用的undefined,其他浏览器用的是null.所以ff在第一个判断会挂掉。
    如果代码改成:
    function(input, callback){
    if (“onpropertychange” in input){ //IE6/IE7/IE8
    input.onprepertychange = function(){
    if (window.event.propertyName == “value”){
    callback.call(this, window.event)
    }
    }
    }else if(input.addEventListener) input.addEventListener(“input”, callback, false);
    }

    就可以了。

  2. 2. [分享]哥俩好:oninput & onpropertychange « NeverBest!我还能做的更好 – 007boy | im007boy

    […] PlanABC – 怿飞’s Blog: http://www.planabc.net/2011/10/18/oninput_and_onpropertychange/ 分享 分类: 未分类 发表评论 评论 (0) 引用 (0) […]

  3. 3. 头像 zythum

    话说怿飞哥哥什么时候偷偷改过来的。。。回复里也不说下。冷淡冷淡。哎哎。(~_~;)

  4. 4. 头像 zsk

    话说,在ie9下的backspace,delete多种事件删除内容不会发生oninput事件。 不知道有没有什么解决方法?

  5. 5. 头像 小豪

    这个方法性能不好,所以YUI的onchange用300ms的定时器来检查

  6. 6. 头像 zsk

    IE9下, 使用delete键,和鼠标剪切,黏贴不会调用方法。

  7. 7. 头像 乐游

    示例中写成了
    input.onprepertychange
    坑爹啊

  8. 8. 头像 怿飞

    @zythum 谢谢提出错误,已经更正。
    @乐游 谢谢提醒,笔误。

  9. 9. 如何更合理的监测用户输入 « 梦寻千里

    […] http://www.planabc.net/2011/10/18/oninput_and_onpropertychange/ « Prev:骗子的这点伎俩 […]

  10. 10. 头像 葉子

    不做前端,只能占座

  11. 11. 头像 步小松博客

    谢谢博主分享..

  12. 12. 头像 ak198

    没用过IE9.。。

  13. 13. 头像 nolure

    对于chrome的浏览器默认填充表单,oninput无法捕获到,有什么好的解决方案啊 ,求解答……

  14. 14. onpropertychange功能的兼容 | Jucelin

    […] 《哥俩好:oninput & onpropertychange》 […]

  15. 15. 头像 宁波货代公司

    谢谢博主分享,期待更新

  16. 16. 头像 爱趣

    oninput还有没有ie中的onprepertychange强大啊。

    以前就想找一个onprepertychange的替代方法,主要是onprepertychange在用js修改值时也可以触发,最后还是用了setInterval定时检测。。。

  17. 17. Easyui学习班

    关于文本框onchange事件…

    传统对于文本框(input)的输入可通过键盘的 onkeydown / onkeypress / onkeyup 来监测,但在处理较多细节时存在诟病比如: cut(剪切) / paste(复制) / undo(撤销) / redo(重做) / drag & drop(拖拽)/ 输入法等。 而 oninput & onpropertychange 事件基本可以解决上面的诟病: oninput 事件作为 HTML5 中的标准事件,基本除了IE6 / IE7 / IE8 外的最新浏览器均支…

  18. 18. 头像 千娱乐

    其实ONINPUT的使用方法很多哦。

  19. 19. 头像 丝袜

    很喜欢 你的文章,希望能过发几篇

  20. 20. 头像 blue

    好长时间木有更新了

发表评论

(必填)

(必填,会为您保密)

评论仅支持“a、abbr、strong、em、blockquote、code”几个简单的标签