js 复制内容到剪切板

最新推荐文章于 2023-04-17 13:54:11 发布

csdn_cjgu

最新推荐文章于 2023-04-17 13:54:11 发布

阅读量715

点赞数 1

分类专栏： js-剪贴板文章标签： javascript clipboard 剪切板

本文链接：https://blog.youkuaiyun.com/csdn_cjgu/article/details/53432721

版权

js-剪贴板专栏收录该内容

0 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现全浏览器兼容的复制到剪切板功能，针对window.clipboardData和Zero Clipboard在不同浏览器上的兼容性问题提出解决方案。作者分享了一个在各大浏览器上都能正常工作的代码示例，并提供了下载链接。虽然复制隐藏内容时可能存在问题，但整体方案简单实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近客户提出来要将当前页面的url 复制到剪切板，然后直接打开其他浏览器标签粘贴播放的需求，但是上网找了很多例子都不好使（浏览器兼容），网上的的现有方案大致有两种：

一：使用原生JavaScript中window.clipboardData实现复制到剪贴板功能，但是仅仅支持ie浏览器，在firefox,chrome浏览器上则不起作用

二：使用Zero Clipboard库，它是基于 Flash 来实现跨浏览器的复制功能的，但是在现代浏览器中，flash逐渐没落，firefox浏览器默认不开启flash，所以Zero Clipboard在兼容方面也表现不佳

最后在一个牛人的博客上找到了这个可以兼容各大浏览器的好方法，测试之后找到一个比较通用、适用的方法，（但是有个问题，就是复制的内容元素不能设置隐藏样式，否则功能不好用，暂时也没找到解决办法）功能做完之后记录一下方便日后自己和其他人使用，直接上代码，还有demo 举例可自行下载：http://download.youkuaiyun.com/detail/csdn_cjgu/9699601

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function-target</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <!-- 1. Define some markup -->
    <button class="btn">Copy</button>
    <div>hello</div>

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

    <!-- 3. Instantiate clipboard -->
    <script>
    var clipboard = new Clipboard('.btn', {
        target: function() {
            return document.querySelector('div');
        }
    });

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

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

非常简单实用，引入js （clipboard.min.js），将功能嵌入自己的页面即可

也可以在复制成功和复制失败方法中加入提示，例如：

//我们定义两个成功和失败需要显示的div
<div class='copyTipSuc'>☺ 复制成功</div>
<div class='copyTipFail'>复制失败！</div>
//定义提示的样式和位置
.copyTipSuc{
    position: absolute;
    width: 78px;
    z-index: 100;
    background-color: #ffffff;
    border: 1px solid #ddacac;
    font-size: 12px;
    border-radius: 3px;
    padding: 3px;
    top: 44px;
    left: 680px;
    display:none;
}
//成功后弹出提示
clipboard.on('success', function(e) {
    $(".copyTipSuc").fadeIn("slow");
    setTimeout(function(){
        $(".copyTipSuc").fadeOut("slow");
    },1000);
});