难为人的点击复制

最新推荐文章于 2024-10-16 11:23:07 发布

欧阳小坏

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量243

点赞数

分类专栏：学习记录文章标签：前端

本文链接：https://blog.csdn.net/ou24689/article/details/100992893

版权

学习记录专栏收录该内容

10 篇文章 0 订阅

订阅专栏

今天拿到一个点击按钮复制按钮里href的项目
别问我为什么按钮要有href

1.使用clipboard.js插件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #coptHint {
            position: fixed;
            top: 20vh;
            text-align: center;
            display: none;
            width: 300px;
            height: 200px;
            left: calc(50vw - 150px);
            line-height: 200px;
            background-color: #eee;
        }
    </style>
</head>

<body>

    <div id="coptHint">已复制</div>
    <button class="copytxt" data-clipboard-text="baidu">baidu</button>
    <button class="copytxt" data-clipboard-text="guge">guge</button>
    <button class="copytxt" data-clipboard-text="sougou">sougou</button>
    <button class="copytxt" data-clipboard-text="360">360</button>
</body>

<script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    var link = document.getElementsByClassName("copytxt")
    var clipboard = new Clipboard(link);
    clipboard.on('success', function (e) {
        $("#coptHint").fadeIn(10)
        $("#coptHint").fadeOut(1500)
        console.log(e);
    });
</script>

</html>

这个是可以实现的，但是不能用这是一个后台模板弄出来的页面。不存在随意添加，只能改href
我太难了.jpg

2.使用document.execCommand(“Copy”)

谷歌浏览器好像不能使用这个方法，

3.抖机灵

滑稽.jpg

首先在每个按钮中渲染出来href
然后获取这个值来添加到data-clipboard-text中

     var btns = $('.copyBtn');
        for(let i=0;i<btns.length;i++){
             var copyTxt=btns[i].attributes.href.value
           $(".copyBtn").eq(i).attr('data-clipboard-text',copyTxt)
        }

然后使用方法1
机智如我