html点击复制一段文字内容,js实现点击按钮复制文本功能

这篇文章主要为大家详细介绍了原生js实现点击按钮复制文本的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

效果如下

一、原理分析

浏览器提供了 copy 命令 ，可以复制选中的内容

document.execCommand("copy")

如果是输入框，可以通过 select() 方法，选中输入框的文本，然后调用  copy 命令，将文本复制到剪切板

但是 select() 方法只对 和 有效，对于

就不好使

最后我的解决方案是，在页面中添加一个 ，然后把它隐藏掉

点击按钮的时候，先把 的 value 改为

的 innerText，然后复制 中的内容

二、代码实现html>

.wrapper {position: relative;}

#input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}

function copyText() {

var text = document.getElementById("text").innerText;

var input = document.getElementById("input");

input.value = text; // 修改文本框的内容

input.select(); // 选中文本

document.execCommand("copy"); // 执行浏览器复制命令

alert("复制成功");

}