首页 前端知识 js/html实现复制功能

js/html实现复制功能

2024-05-10 22:05:03 前端知识 前端哥 883 996 我要收藏

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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7959.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!