关于clipboard.js复制图片以及文本的随笔

最新推荐文章于 2023-09-12 14:10:53 发布

weixin_30485379

最新推荐文章于 2023-09-12 14:10:53 发布

阅读量796

点赞数

原文链接：http://www.cnblogs.com/xiaobaicai123/p/9156220.html

版权

做了一个商场的复制文本以及图片的功能，网上找到了clipboard.js,试了会发现有些图片不能复制到后面尝试了多次，最后得到的结果就是服务器的路径不能过长比如：

1、https://img.alicdn.com/imgextra/i2/2378443470/TB2OzgWvNGYBuNjy0FnXXX5lpXa_!!2378443470.jpg（不行）；
2、/goodsimg/2018606/152826962440080876.jpg（可行）；

具体文档可去官方查看，下面附上我自己写的代码，急用的话可看下。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="layui/css/modules/layer/default/layer.css"/>
</head>
<body>
<span class="fq-copy">
复制
</span>

<span class="layui-layer-content" id="a1">
<img class='' src='/goodsimg/2018606/152826962440080876.jpg'>
<br/>描述文字~
</span>

<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="js/clipboard.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function _copy(anniu,content){
var clipboard = new Clipboard(anniu, {
target: function(e) {
return document.querySelector(content);
}
});

clipboard.on('success', function(e) {
alert('复制成功！！');
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});

clipboard.on('error', function(e) {
alert('复制失败!')
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
}
_copy('.fq-copy','.layui-layer-content');
</script>
</body>
</html>

//jq过滤复制内容的方法

        $(function() {
            var clipboard = new Clipboard('#clickcopy',{
                // 通过target指定要复印的节点
                target: function(trigger) {
//                  var $foo = $(trigger).prev(".foo").clone();
                    
                        var $foo =$('.editbox').clone();
                    
                    $(trigger).after($foo);
                    var $imgs = $(trigger).next(".editbox").find("img")
                    $imgs.each(function(){
                        $(this).after($(this).data("emoji"));
                        $(this).remove();
                    });
                    return $(trigger).next(".editbox")[0];
                }
            });

            clipboard.on('success', function(e) {
                alert("成功");
                $(e.trigger).next(".editbox").remove();
                e.clearSelection();
            });
            clipboard.on('error', function(e) {
                alert("复制失败!本产品只兼容到Chrome 42+、Firefox 41+、IE 9+、Opera 29+，请您换一个最新浏览器。")
            });
        });

转载于:https://www.cnblogs.com/xiaobaicai123/p/9156220.html

weixin_30485379

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于clipboard.js复制图片以及文本的随笔

做了一个商场的复制文本以及图片的功能，网上找到了clipboard.js,试了会发现有些图片不能复制到后面尝试了多次，最后得到的结果就是服务器的路径不能过长比如：1、https://img.alicdn.com/imgextra/i2/2378443470/TB2OzgWvNGYBuNjy0FnXXX5lpXa_!!2378443470.jpg（不行）；2、/goodsimg/2018606/...
复制链接

扫一扫