jquery复制文本到windows粘贴板

原创已于 2022-08-19 16:26:14 修改 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery #javascript #firefox

于 2020-04-03 17:03:32 首次发布

Java Web 同时被 2 个专栏收录

39 篇文章

订阅专栏

JS/jQuery/nodejs

21 篇文章

订阅专栏

最近在写一个程序，需要用到复制的操作，于是就去网上搜索了一下，现有的方案大致有两种：

　一：使用原生 javascript 中 window.clipboardData 实现复制到剪贴板功能；

　二：使用 Zero Clipboard 库；

在尝试了之后发现现有的方案都不能满足需求还有些 bug。方案一仅仅支持 ie 浏览器，在 firefox,chrome 浏览器上则不起作用。

方案二则是现有绝大多数网站（包括 github 等）所采取的方案，ZeroClipboard 是国外大神开发的一个用于剪贴板复制的 JS 插件，它是基于 Flash 来实现跨浏览器的复制功能的。当我们使用 ZeroClipboard的时候，它会悄悄隐藏一个小小的 Flash 影片 (swf)，不会对我们的用户界面造成影响。我们只需要借助它实现复制功能就行了，我在使用过程中出现点击两次才会复制的情况，第一次点击 swf 文件不会加载，第二次才加载ZeroClipboard 中的 "Zero" 指的就是 "不可见，零干扰"。但是在现代浏览器中，flash 逐渐没落，firefox 浏览器默认不开启 flash，所以 Zero Clipboard 在兼容方面也表现不佳。那么，对于复制到剪切板这种简单的操作有没有一种实现简单，兼容性良好的解决方案呢？有的！那就是 github上的开源项目 clipboard.js

官网：http://zenorocha.github.io/clipboard.js

官网对于 clipboard.js 的介绍非常简单：

　　拷贝文本到剪切板不应该复杂，它不应该需要许多步骤以及几百 KB 的文件，另外，它不应该依靠 flash 以及其他框架，这就是 clipboard 存在的原因。使用 clipboard 简单快捷，并且从官网下载下来的 zip 格式压缩包里有非常实用的 demo, 举一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>target-div</title>
</head>
<body>
    <!-- 1. Define some markup -->
    <div>hello</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

    <!-- 2. Include library -->
    <script src="../dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->
    <script>
    var clipboard = new Clipboard('.btn');

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

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>
</html>

非常简单吧，我们只需下面四步：

1. 引入 clipboard.min.js 文件

2. 选择一个可以确定被拷贝元素的选择器，本例中使用用的是基本的标签选择器 <div>，当然也可以使用 id 选择器 class 选择器等等

3. 定义一个 button 按钮，注意按钮的属性：

　　data-clipboard-action="copy" data-clipboard-target="div"
　　其中 data-clipboard-target 属性就是第二步你定义的选择器

4. 书写 js, 建立 clipboard 对象以及复制后执行的方法。

OK, 这样功能就完成了，点击按钮后就会发现 div 的内容已经拷贝到剪切板了。

更详细的代码示例可以看看这个网站：index