实现原理极其简单,就是使用一个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('拷贝成功!');
}
最终实现如下:
示例一