Home > Article > Web Front-end > HTML page-share the sample code used by the copy button

HTML page-share the sample code used by the copy button

黄舟Original: 2017-04-18 09:27:234865browse

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);"> Let me talk about my overall plan first:

uses the clipboard plug-in. For the official address and github address, you can also refer to the Chinese description.

Actual test of the clipboard plug-in: It is available in PC browsers (tried safari, chrome, firefox on mac), safari on iOS 10.3, and mobile phones. The WeChat QQ browser can be used, but the browser that comes with Android phones and UC are not available. Therefore, for unavailable devices, use the method of popping up the layer and long-pressing to copy manually.

There is one thing to note here. When the label that needs to be obtained is display:none, the data-clipboard-target method cannot get the value. You can use data-clipboard-text combined with the following method.

var getContent=document.getElementById("divContent").innerHTML;
document.getElementById("copy-button").setAttribute("data-clipboard-text", getContent);

The code is as follows:

<!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>

The above is the detailed content of HTML page-share the sample code used by the copy button. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML superscript and subscript application examplesNext article：HTML superscript and subscript application examples

See more

HTML page-share the sample code used by the copy button

Related articles