js实现复制功能

最新推荐文章于 2024-10-09 00:58:21 发布

假装我不帅

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量564

点赞数 4

分类专栏： js 文章标签： javascript 开发语言 ecmascript clipboard

本文链接：https://blog.csdn.net/qq_36437991/article/details/141956005

版权

js 专栏收录该内容

65 篇文章 1 订阅

订阅专栏

官网

https://github.com/zenorocha/clipboard.js

使用

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS复制粘贴</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.11/clipboard.js"></script>
</head>

<body>
    <button class="btn" data-clipboard-text="随便写点东西1">点击复制</button>
    <input type="text" id="copyVal" readonly value="随便写点东西2" />
    <button class="btn1" data-clipboard-target="#copyVal">点击复制1</button>
    <button class="btn2">点击复制2</button>
    <button class="btn3">点击复制3</button>
    <script>
        var copyBtn = new ClipboardJS('.btn');
        copyBtn.on("success", function (e) {
            // 复制成功
            alert(e.text);
        });
        copyBtn.on("error", function (e) {
            //复制失败；
            console.log(e.action)
        });
        var copyBtn1 = new ClipboardJS('.btn1');
        copyBtn1.on("success", function (e) {
            // 复制成功
            alert(e.text);
            e.clearSelection();
        });
        copyBtn1.on("error", function (e) {
            //复制失败；
            console.log(e.action)
        });
        //如果不想再html中添加特性
        new ClipboardJS('.btn2', {
            text: function (trigger) {
                //例如获取js获取多个元素最终拼接字符串
                alert('随便写点东西3')
                return "随便写点东西3";
            },
        });
        var btn3Copy = new ClipboardJS('.btn3', {
            target: function (trigger) {
                return document.querySelector('#copyVal');
            },
        });
        btn3Copy.on("success", function (e) {
            // 复制成功
            alert(e.text);
            e.clearSelection();
        });
        btn3Copy.on("error", function (e) {
            //复制失败；
            console.log(e.action)
        });
    </script>
</body>

</html>