用到了clipboard插件,官方地址和github地址,也可以參考中文說明。
clipboard插件實測:在PC端的瀏覽器(試了mac上的safari,chrome,firefox)可用,iOS 10.3上的safari可用,手機上的微信QQ瀏覽器能用,安卓手機自帶的瀏覽器以及UC,不可用。所以對不可用的設備,采用彈層,長按手動復制的方法。
這里需要注意一點,當需要獲取的 標簽 為dispaly:none 的時候data-clipboard-target的方式得不到值,可用data-clipboard-text結(jié)合下面的方法。
var getContent=document.getElementById( divContent ).innerHTML;document.getElementById( copy-button ).setAttribute( data-clipboard-text , getContent);
代碼如下:
!DOCTYPE html html head meta http-equiv= Content-Type content= text/html; charset=utf-8 meta http-equiv= X-UA-Compatible content= IE=edge,chrome=1 meta name= viewport content= width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no title 復制 /title style type= text/css .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; /style script type= text/javascript function showLayer() { document.getElementById( divLayer ).className= show function closeLayer() { document.getElementById( divLayer ).className= hidden /script /head body div id= divLayer div id= centerLayer div >以上就是HTML頁面-復制按鈕使用的示例代碼分享的詳細內(nèi)容,html教程
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯(lián)系我們修改或刪除,多謝。
新聞熱點
疑難解答