Rumah >hujung hadapan web >html tutorial >HTML页面-复制按钮使用的示例代码分享
margin: 0px; padding: 10px 0px 5px; font-size: 14px; color: rgb(37, 37, 37); font-family: arial, "microsoft yahei", 宋体, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">先说一下我的整体方案:
用到了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 style="height: 20px; padding-top:8px; padding-bottom: 8px;">请长按选中下面虚线框中的内容进行复制:</div> <div id="showContent" style="border: 1px gray dashed; height: 120px; padding-top: 8px;"> <span id="divContent">hello world!</span> </div> <button id="closeButton" onclick="closeLayer()" style="border: 1px gray solid; margin-top: 10px;">点击关闭</button> </div> </div> <button id="copy-button" data-clipboard-action="copy" data-clipboard-text="text!">复制</button> <script type="text/javascript" src="clipboard.min.js"></script> <script> //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(); }); </script> </body> </html>
Atas ialah kandungan terperinci HTML页面-复制按钮使用的示例代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!