MENU

使用clipboard.js实现复制内容

2020 年 02 月 24 日 • 默认分类阅读设置

拷贝文字不应当是一件困难的事. 不需要过多繁杂的配置或者下载很多脚本文件. 最重要的,它不应该依赖flash或者其他框架。而且代码非常简洁。

中文文档:http://www.clipboardjs.cn/
官网地址:http://www.clipboardjs.com/
Github:https://github.com/zenorocha/clipboard.js

使用方法如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>copy</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<!--
    <button class="btn" data-clipboard-text="子凤">Copy</button>
    <button class="btn" data-clipboard-text="爱你">Copy</button>
    <button class="btn" data-clipboard-text="Mua~">Copy</button>
-->

    <button class="btn" data-clipboard-text="我们">Copy</button>
    <button class="btn" data-clipboard-text="再也">Copy</button>
    <button class="btn" data-clipboard-text="回不去了">Copy</button>

    <script src="https://api.catiz.cn/api/clipboard/clipboard.js"></script>

    <script>
    var clipboard = new ClipboardJS('.btn');

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>
</html>
最后编辑于: 2021 年 01 月 09 日