灵巧还是笨重？利用Textarea从浏览器复制字符到剪贴板

最新推荐文章于 2021-08-18 09:00:00 发布

weixin_34126215

最新推荐文章于 2021-08-18 09:00:00 发布

阅读量155

点赞数

文章标签： javascript git python ViewUI

原文链接：https://my.oschina.net/skywingjiang/blog/918461

版权

2019独角兽企业重金招聘Python工程师标准>>>

想要从浏览器复制字符到剪贴板，网上有很多方法，其中有使用flash的ZeroClipboard，也有window.clipboardData（适用于IE）。

或者利用Textarea的select方法和document.execCommand("Copy")来进行复制，但是这样只能复制Textarea的value属性的内容。想要复制其它内容，可以先将Textarea的value属性设置为想要复制的内容，再重复上述的步骤。

为了不让Textarea影响网页视觉效果，可以设置其CSS的opacity为0，不能设置display：none或visibility：hidden，这样会使上述的操作无效。

这里编写了实现上述功能的一个jQuery插件：

;(function($)
{
    var clipboardDummy=$("<textarea id=\"clipboardDummy\" style=\"position: absolute;width:0;height:0;opacity: 0;\"></textarea>");
    $(function()
    {
        $("body").append(clipboardDummy);
    });

    $.fn.extend(
    {
        /**
         * @name 复制到剪贴板
         * @description 将元素value或innerHTML值复制到剪贴板，value优先。
         */
        "copyToClipboard":function()
        {
            if(this.val())
                clipboardDummy.val(this.val());
            else if(this.html())
                clipboardDummy.val(this.html());
            clipboardDummy[0].select();
            document.execCommand("Copy");

            return this;
        }
    });
})(jQuery);

源码：https://git.oschina.net/skywingjiang/clipboard.git

转载于:https://my.oschina.net/skywingjiang/blog/918461