HTML page-share the sample code used by the copy button-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

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

黄舟

Apr 18, 2017 am 09:27 AM

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

Copy after login

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>

Copy after login

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 of this Website

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