textarea的事件分析

场景:因业务需要,当用户向textarea粘贴内容时对内容处理回显;textarea不支持change事件;

js依赖:jquery

方案一:

  绑定keyup事件,过滤掉方向键、删除键、回车键,这样可以满足大部分需求,用户可以在textarea内修改任意内容,光标不受影响,能达到数据处理回显,可是当用户用鼠标右键粘贴不能达到预定要求;

方案二:

  绑定keyup、paste事件,根据事件类型分别处理;如果是keyup事件依然过滤特殊键(方向键等),如果是paste事件直接处理,遇到的问题是并没有数据处理回显;经过调试发现,paste事件是先执行响应函数后粘贴内容,因此利用setTimeout函数可以解决该问题;

代码:

$(function () {
        var $paste = $('.paste-code');
        if ($paste) {
            $paste.on('keyup paste', function (e) {
                if (e.type == 'keyup' && $.inArray(e.keyCode, [37, 38, 39, 40, 8, 13]) < 0) {
                    $paste.val(Q.pages.paste_precut($paste.val()));
                } else {
                    setTimeout(function () {
                        $paste.val(Q.pages.paste_precut($paste.val()));
                    }, 10);
                }
            });
        }
    });

 

posted on 2013-09-10 17:22  中传思客  阅读(3121)  评论(0)    收藏  举报

导航