JS如何实现点击复制功能，JS点击复制文本

最新推荐文章于 2024-09-26 14:44:31 发布

ytakcc

最新推荐文章于 2024-09-26 14:44:31 发布

阅读量564

点赞数 7

文章标签：前端

本文链接：https://blog.csdn.net/ytakcc/article/details/134959551

版权

文章描述了如何使用HTML和JavaScript创建一个不可见的文本框，通过点击按钮将页面上的内容（如神马博客网址）动态赋值给该文本框，并利用`document.execCommand(copy)`实现内容复制功能。

摘要由CSDN通过智能技术生成

div，p等标签不可以，建一个文本框标签，不能给display:none; 我们需要对他进行一个定位，让透明看不见找不到，点击复制，将需要复制的内容赋值给文本框，接着对文本框进行全选，在进行复制操作即可

<p id="content">神马博客www.smddw.com</p>
<textarea id="text" style="position: fixed;top: 10000px;left: 10000px;opacity: 0;"></textarea>
<button id="CopyBtn">点击复制</button>

<script>
    var content = document.getElementById("content").innerText;
    var text = document.getElementById("text");
    var CopyBtn = document.getElementById("CopyBtn");
    CopyBtn.onclick = function(){
        // 将需要复制的内容赋值给文本框
        text.value = content;
        // 选中文本框的内容
        text.select();
        // 对选中的内容进行复制
        document.execCommand("copy");
    }
</script>