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);

代码如下：

 !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页面-复制按钮使用的示例代码分享的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。