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

而 oninput & onpropertychange 事件基本可以解决上面的诟?。?/p>

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: //www.r5qgb.cn/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. 如何更合理的监测用户输入 « 梦寻千里

    […] //www.r5qgb.cn/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”几个简单的标签

? ?
  • 凰家街采:你期待的长江时代 ——凤凰网房产武汉 2018-07-26
  • 反思顾雏军案,营造可预期的法治环境 2018-07-26
  • 广图:神“摄”手初养成计划:摄影师爸爸成长篇 2018-07-26
  • 女性之声——全国妇联 2018-07-25
  • 习近平与人民日报那些事 2018-07-25
  • 新IP--河北频道--人民网 2018-07-25
  • 新时代领导干部应急管理能力提升的实践与思考 2018-07-25
  • 证监会答复投资者信息检索库 2018-07-24
  • 款款粽子情,深深敬老人 2018-07-24
  • 李鹏国的行为是对善良的一种打击,暴露了资本主义的道貌岸然的虚伪本质,女白领的同情心是值得赞扬的,只有不够,没有毛病 2018-07-24
  • 邓紫棋首任明星制作人 吴亦凡身兼二职 2018-07-23
  • 地铁上索座不成 蛮横老汉掌掴大妈 2018-07-23
  • 发现食品安全问题拨打12331投诉 2018-07-23
  • 莆田市:建立“网上大调解中心”经验做法 2018-07-22
  • 火锅店推120元月卡11天被吃垮:8点就排队,一卡全家用 2018-07-22
  • 577| 425| 289| 882| 673| 893| 689| 133| 49| 945|