js粘贴插件

最新推荐文章于 2023-06-07 09:49:00 发布

weixin_34372728

最新推荐文章于 2023-06-07 09:49:00 发布

阅读量130

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/fuyong/blog/741874

版权

为什么80%的码农都做不了架构师？>>>

最近项目有一个需求,需要把Excel一列的数据粘贴到文本框里进行搜索.IE浏览器下单行的文本框由于数据中有换行符,导致只能粘贴进一条数据.到网上搜索一番,各浏览器对粘贴板操作权限和方式各不一致.有通过flash来进行间接操作的zeroclipboard插件,在flash日渐衰败的情况下,flash兼容性也存在很大问题.比如FF浏览器默认就不开启flash.

还有一个clipboardjs跨各种浏览器,而且不使用flash,但是只支持将数据写入粘贴板,并不支持从粘贴板中读出数据并进行相应的操作啊.这不是坑爹么?我看它里面的源码,动态创建html标签然后在该html上使用浏览器的execCommand命令去进行cut,copy,paste操作,の......

现代浏览器在单行文本框中粘贴存在换行符的内容都有很好的处理,其实我们就不需要考虑了,插件的大体思想就是监听paste事件然后异步重新发送afterpaste事件.在afterpaste事件中从IE下特有的clipboardData读取或设置粘贴板内容.只能靠这种取巧的挫办法了

/*
右键粘贴    仅支持IE下
created by fy on 2016-09-01
*/
;(function ($) {
    var defaults = {
        datafun: function(data) {
            if(data)
                return data.replace(/(\r\n|\r|\n)/g, ' ');
            return ""; 
        },
        actionfun: $.noop
    }
    $.fn.extend({
        "myPaste": function (options) {
            if (!window.clipboardData)// || document.execCommand)
                return;
            //数据处理函数和获取数据之后的动作函数
            var datafun, actionfun;
            if(arguments.length > 1) {
                datafun = arguments[0] || defaults.datafun;
                actionfun = arguments[1];
            } else if(arguments.length === 1){
                actionfun = arguments[0];
            }
            if(!datafun || !$.isFunction(datafun))
                datafun = defaults.datafun;
            if(!actionfun || !$.isFunction(actionfun))
                actionfun = defaults.actionfun;
            //遍历函数，然后监听粘贴事件
            return this.each(function () {
                var that = this;
                $(that).on("paste", function () {
                    setTimeout(function () {
                        //异步发送afterpaste事件
                        $(that).trigger("afterpaste"); 
                    }, 20);
                    return false;
                });
                //监听afterpaste事件
                $(that).on("afterpaste", function () {
                    //for ie
                    var data = window.clipboardData.getData('text');
                    var data = datafun(data);
                    $(that).val(data);
                    actionfun(data);
                });
            });
        }
    });

})(jQuery);

我们如何在项目中使用:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <input id="content" type="text" value="" style="width:500px;"/>

    <script src="./jquery-1.8.3.js"></script>
    <script src="./paste.js"></script>

    <script>
        $(function(){
            //第一个参数可选
	    $("#content").myPaste(function(data){
                return data.replace(/(\r\n|\r|\n)/g, ' ');
            }, function(data) {
                alert(data);
            });
        });		
    </script>
</body>
</html>

转载于:https://my.oschina.net/fuyong/blog/741874