木子屋
 

标题: Javascript复制粘贴脚本库clipboard.js使用示例

作者: dnawo

日期: 2020-04-22 11:50 PM

分类: 脚本语言

内容: clipboard.js不依赖flash，不依赖其他框架，gzip压缩后只有3kb大小。
一、引用clipboard.js
复制内容到剪贴板 程序代码<script src="https://github.com/zenorocha/clipboard.js/blob/master/dist/clipboard.min.js"></script>
二、clipboard.js使用示例
1、从另一个元素复制文本：
复制内容到剪贴板 程序代码<!-- target -->
<input id="foo" value="hello,clipboard.">
<!-- trigger -->
<button class="btn1" data-clipboard-target="#foo">复制到剪贴板</button>
<script>new ClipboardJS('.btn1');</script>
或：
复制内容到剪贴板 程序代码<!-- target -->
<input id="foo" value="hello,clipboard.">
<!-- trigger -->
<button class="btn1">复制到剪贴板</button>
<script>
    new ClipboardJS('.btn1', {
        target: function(trigger) {
            return document.getElementById('foo');
        }
    });
</script>
2、从属性复制文本：
复制内容到剪贴板 程序代码<button id="btn1" data-clipboard-text="hello,clipboard.">复制到剪贴板</button>
<script>new ClipboardJS(document.getElementById('btn1'));</script>
或：
复制内容到剪贴板 程序代码<button id="btn1">复制到剪贴板</button>
<script>
    new ClipboardJS(document.getElementById('btn1'), {
        text: function(trigger) {
            return "hello,clipboard.";
        }
    });
</script>
如果data-clipboard-text的值是动态赋值且比较耗时，可能导致复制的结果不正确，下边是我想到的一种解决方案：
复制内容到剪贴板 程序代码<button class="btn1" style="display: none;" data-clipboard-text=""></button>
<script>new ClipboardJS(".btn1");</script>
<button id="todo">复制到剪贴板</button>
<script>
    $(document).ready(function(){
        $("#todo").click(function(){
            //todo...
            let text = (new Date()).getTime();
            
            $(".btn1").attr("data-clipboard-text", text);
            $(".btn1").click();
        });
    });
</script>
3、监听success和error事件反馈复制结果：
复制内容到剪贴板 程序代码<button id="btn1" data-clipboard-text="hello,clipboard.">复制到剪贴板</button>
<script>
    var clipboard = new ClipboardJS(document.getElementById('btn1'));
    clipboard.on('success', function(e) {
        alert("复制成功！");
        e.clearSelection();
    });
    clipboard.on('error', function(e) {
        alert("复制失败，按 Ctrl+C 复制文字。");
    });
</script>
参考资料
[1].clipboard.js中文网：http://www.clipboardjs.cn/

+ 查看当前日志评论 (0)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.609 ms

标题: Javascri&#112;t复制粘贴脚本库clipboard.js使用示例

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.609 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.609 ms