html 按钮复制内容,js 实现点击按钮复制内容

实现原理极其简单，就是使用一个textarea或者input标签，调用标签自带的select()方法，再调用浏览器的copy命令即可。

以下为代码：

Example

#copy{

position: absolute;

left: -500px;

top: -500%;

opacity: 0;

z-index: -10;

}

p{

display: inline-block;

padding: 10px;

background-color: #DDD;

text-align: center;

}

.wrap{

text-align: center;

}

楼观岳阳尽，川迥洞庭开。雁引愁心去，山衔好月来。

拷贝

//处理按钮点击事件

var btn = document.getElementById('btn');

btn.onclick = function(){

//获取p节点的文本

var ctnt = document.getElementById('content').innerText;

//为textarea的value赋值

var copy = document.getElementById('copy');

copy.value = ctnt;

//调用选中，执行复制命令

copy.select();

document.execCommand('copy');

//提示成功

alert('拷贝成功！');

}

最终实现如下：

示例一