关闭

input等表单项值或属性发生变化时的事件监听

标签: js事件监听
474人阅读 评论(0) 收藏 举报
分类:

HTML5增加了个事件oninput,这个监听包括:输入时、点击文本框下拉提示输入时、右键的复制、剪贴和粘贴,但由于IE9以下不支持oninput,所以加一个onpropertychange事件监听可完美解决。

$(function(){
    //监听手机号码输入
    $("#mobile").on("input propertychange", function() {
         //todo
    });

参考:http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html


但请教了一位前端大牛,话说是oninput兼容性比较差,propertychange这个监听影响性能。

于是有了下面这个折中的办法:

$(function(){
    $.fn.pasteEvents = function(delay){
        if (delay == undefined) delay = 20;
        return $(this).each(function(){
            var $el = $(this);
            $el.on("paste", function(){
                $el.trigger("prepaste");
                setTimeout(function(){$el.trigger("postpaste");}, delay);
            });
        });
    };

    //监听手机号码输入
    $("#mobile").on("input keyup postpaste", function() {
         //todo
    });

补充说明:

在实际使用过程中,input、keyup、postpaste对这些事件的监听,会出现冒泡从而多次回调,还是以监听input、propertychange为比较稳定的用法。


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:48078次
    • 积分:1573
    • 等级:
    • 排名:千里之外
    • 原创:108篇
    • 转载:54篇
    • 译文:0篇
    • 评论:0条
    文章分类