js/html实现复制功能

清水映云

已于 2023-11-27 13:33:56 修改

阅读量1.3k

点赞数 1

文章标签： javascript html 前端

于 2023-11-21 09:57:33 首次发布

本文链接：https://blog.csdn.net/zqy123456_123/article/details/134524865

版权

1.js复制

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

<head>
    <meta charset="UTF-8">
    <title>复制功能</title>
</head>

<body>
    <span id="copyText1">这里是被复制的内容</span>
    <input type="button" onClick="copy1()" value="点击复制"/>

    <span id="copyText2">44545123664444446666666</span>
    <input type="button" value="复制" onclick="copy2(document.getElementById('copyText2'));" />
</body>

<script type="text/javascript">
    function copy1() {
        var copy = document.getElementById("copyText1").innerText;
        var oInput = document.createElement('input');
        oInput.value = copy;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = 'oInput';
        oInput.style.display = 'none';
        alert('复制成功');
    }

    function copy2(x) {
        if (document.selection) {
            var range = document.body.createTextRange(); //ie
            range.moveToElementText(x);
            range.select();
        } else if (window.getSelection) {
            var selection = window.getSelection();
            var range = document.createRange();
            selection.removeAllRanges();
            range.selectNodeContents(x);
            selection.addRange(range);
        }
        document.execCommand("copy");
    }

</script>

</html>

2.clipboard复制

使用npm工具安装

npm install clipboard --save

下载压缩包，链接：https://github.com/zenorocha/clipboard.js/archive/master.zip

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clipboard基本的使用方法</title>
</head>

<body>
    <!-- 1. 定义一些标记 -->
    <!-- 2. 设置按钮 -->

    <!-- 示例1：复制input元素的value值 -->
    <input id="foo" type="text" value="这是input元素的value值" />
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">点击复制</button>

    <!-- 示例2：剪切textarea元素的值 -->
    <textarea id="bar">这里的文本可被复制或者剪切</textarea>
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">点击剪切文字</button>

    <!-- 示例3：复制div元素的值 -->
    <div>这是div元素里的文字</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">复制来自div的文字</button>

    <!-- 示例4：复制button自己设置的值 -->
    <button class="btn" data-clipboard-text="这里的文字将被复制">复制自己的文字</button>
</body>
<!-- 3. 引入库文件 -->
<script src="./node_modules/clipboard/dist/clipboard.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script> -->

<script>
    //4. 实例化clipboard
    var clipboard = new ClipboardJS('.btn');

    //5. 复制成功的响应事件【按F12控制台可见】
    clipboard.on('success', function (e) {
        console.log(e);
        //打印动作信息（copy或者cut）
        console.info('Action:', e.action);
        //打印复制的文本
        console.info('Text:', e.text);
        //打印trigger
        console.info('Trigger:', e.trigger);
    });

    //6. 复制失败的响应事件
    clipboard.on('error', function (e) {
        console.log(e);
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
</script>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clipboard高级的使用方法1</title>
</head>

<body>

    <!-- 1. 基本信息定义 -->
    <button class="btn">点击复制</button>
    <div>这里的内容将被复制</div>

    <!-- 2. 引入库文件 -->
    <!-- <script src="./node_modules/clipboard/dist/clipboard.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>

    <script>
        //3. 实例化clipboard
        var clipboard = new ClipboardJS('.btn', {
            target: function () {
                //获取文档中第一个 <div> 元素：
                return document.querySelector('div');
                //返回文档中id为copy-btn的元素
                //document.querySelector("#copy-btn");
                //返回文档中 class="btn" 的第一个元素:
                //document.querySelector(".btn");
                //返回文档中 class="btn" 的第一个 <p> 元素:
                //document.querySelector("p.btn");
                //还有更多方法，可自行百度
            },
        });

        //复制成功响应
        clipboard.on('success', function (e) {
            console.log(e);
        });

        //复制失败响应
        clipboard.on('error', function (e) {
            console.log(e);
        });
    </script>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clipboard高级的使用方法2</title>
</head>

<body>
    <!-- 1. 定义基本元素 -->
    <button class="btn">Copy</button>

    <!-- 2. 引入库文件 -->
    <!--  <script src="../dist/clipboard.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>

    <script>
        //3. 实例化clipboard
        var clipboard = new ClipboardJS('.btn', {
            text: function () {
                return '这里的文本将被复制';
            },
        });

        //复制成功响应
        clipboard.on('success', function (e) {
            console.log(e);
        });

        //复制失败响应
        clipboard.on('error', function (e) {
            console.log(e);
        });
    </script>
</body>

</html>