html内容点击按钮自动复制,HTML页面---复制按钮的使用(包含弹层)

先说一下我的整体方案：

用到了clipboard插件，官方地址和github地址，也可以参考中文说明。

clipboard插件实测：在PC端的浏览器(试了mac上的safari,chrome,firefox)可用，iOS 10.3上的safari可用，手机上的微信QQ浏览器能用，安卓手机自带的浏览器以及UC，不可用。所以对不可用的设备，采用弹层，长按手动复制的方法。

这里需要注意一点，当需要获取的 标签 为dispaly:none 的时候data-clipboard-target的方式得不到值，可用data-clipboard-text结合下面的方法。

var getContent=document.getElementById("divContent").innerHTML;

document.getElementById("copy-button").setAttribute("data-clipboard-text", getContent);

代码如下：

复制

.show {

display: block;

}

.hidden {

display: none;

}

#divLayer {

background-color: rgba(204, 204, 204, 0.7);

width: 100%;

height: 100%;

position: fixed; /* 用absolute的话，当页面过长，下面的部分不会覆盖。*/

left: 0px;

top: 0px;

}

#centerLayer {

background-color: white;

margin-top: 150px;

width: 100%;

height: 208px;

text-align: center;

}

function showLayer() {

document.getElementById("divLayer").className="show";

}

function closeLayer() {

document.getElementById("divLayer").className="hidden";

}

请长按选中下面虚线框中的内容进行复制：

hello world!

点击关闭

复制

//dispaly:none 的时候 data-clipboard-target 得不到值，所以通过下面的方法更改。

var getContent=document.getElementById("divContent").innerHTML;

document.getElementById("copy-button").setAttribute("data-clipboard-text", getContent);

var clipboard = new Clipboard('#copy-button');

clipboard.on('success', function(e) {

console.info('Action:', e.action);

console.info('Text:', e.text);

console.info('Trigger:', e.trigger);

e.clearSelection(); //清除选择

});

clipboard.on('error', function(e) {

console.error('Action:', e.action);

console.error('Trigger:', e.trigger);

showLayer();

});