HTML页面-复制按钮使用的示例代码分享-html教程-PHP中文网

HTML页面-复制按钮使用的示例代码分享

黄舟

发布： 2017-04-18 09:27:23

原创

4973 人浏览过

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(&#39;#copy-button&#39;);
            clipboard.on(&#39;success&#39;, function(e) {
                console.info(&#39;Action:&#39;, e.action);
                console.info(&#39;Text:&#39;, e.text);
                console.info(&#39;Trigger:&#39;, e.trigger);
                e.clearSelection();  //清除选择
            });
            clipboard.on(&#39;error&#39;, function(e) {
                console.error(&#39;Action:&#39;, e.action);
                console.error(&#39;Trigger:&#39;, e.trigger);
                showLayer();
            });
        </script>
    </body>
</html>

登录后复制

以上是HTML页面-复制按钮使用的示例代码分享的详细内容。更多信息请关注PHP中文网其他相关文章！