先說一下我的整體方案：

用到了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();

});

總結

以上是生活随笔為你收集整理的html内容点击按钮自动复制,HTML页面---复制按钮的使用(包含弹层)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。