Rumah > Artikel > hujung hadapan web > HTML页面-复制按钮使用的示例代码分享

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

黄舟asal: 2017-04-18 09:27:234920semak imbas

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>

Atas ialah kandungan terperinci HTML页面-复制按钮使用的示例代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：html上标和下标应用实例Artikel seterusnya：html-webpack-plugin的代码分析详解

Artikel berkaitan

Lihat lagi