Home >Web Front-end >H5 Tutorial >How to implement the click-to-copy function in html5 pages (complete code)

How to implement the click-to-copy function in html5 pages (complete code)

不言Original: 2018-09-01 13:44:1424132browse

The content of this article is about how to implement the click-to-copy function (complete code) in HTML5 pages. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In actual work, sometimes we encounter such a demand. There is a link on the page. There is no need to select the link content. You only need to click the copy button to copy the link content to the clipboard. This can be achieved using the clipboard plug-in. The following is a simple demo.

First, you can install the plug-in through npm install clipboard --save-dev

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>clipboard示例</title>
    <script src="lib/clipboard/dist/clipboard.min.js"></script>
</head>
<body>

<h2>从属性里复制</h2>
<!--data-clipboard-text属性的值将会被复制-->
<p id="btn" class="js-copy" data-clipboard-text="111-从属性复制">
    <span>复制到剪切板-111</span>
</p>
<hr>

<h2>从另外一个元素复制内容</h2>
<textarea id="bar">222-从另外一个元素复制内容</textarea>
<button id="btn2" data-clipboard-target="#bar">复制到剪切板-222</button>
<hr>

<h2>JS里指定复制的内容
<button id="btn3" data-clipboard-target="#bar">复制到剪切板-333</button></h2>

<script>

    //从属性里复制
    var btn = document.getElementById(&#39;btn&#39;);
    var clipboard = new Clipboard(btn);//实例化
    clipboard.on(&#39;success&#39;, function(e) {//复制成功执行的回调，可选
        console.log(e);
    });
    clipboard.on(&#39;error&#39;, function(e) {//复制失败执行的回调，可选
        console.log(e);
    });


    //从另外一个元素复制内容
    var btn2 = document.getElementById(&#39;btn2&#39;);
    var clipboard2 = new Clipboard(btn2);//实例化
    clipboard2.on(&#39;success&#39;, function(e) {//复制成功执行的回调，可选
        console.log(e);
    });
    clipboard2.on(&#39;error&#39;, function(e) {//复制失败执行的回调，可选
        console.log(e);
    });


    //JS里指定复制的内容
    var btn3 = document.getElementById(&#39;btn3&#39;);
    var clipboard3 = new Clipboard(btn3, {
        text: function() {
            return &#39;333-JS里指定复制的内容&#39;;
        }
    });
    clipboard3.on(&#39;success&#39;, function(e) {//复制成功执行的回调，可选
        console.log(e);
    });
    clipboard3.on(&#39;error&#39;, function(e) {//复制失败执行的回调，可选
        console.log(e);
    });

</script>
</body>
</html>

Rendering:

After clicking the copy button, the success callback function will output a Object, which contains information such as copied content. At this time, you can use the paste shortcut key in other places where you input text to paste the contents of the clipboard to the place you need.

How to implement the click-to-copy function in html5 pages (complete code)

Related recommendations:

HTML5 drag-and-drop copy function implementation

##html5 Page click and left and right sliding page scroll_html/css_WEB-ITnose

The above is the detailed content of How to implement the click-to-copy function in html5 pages (complete code). For more information, please follow other related articles on the PHP Chinese website!

html5 npm 回调函数对象

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：What is the alternative to html5 frameset tag? Solution to frameset tag replacementNext article：What is the alternative to html5 frameset tag? Solution to frameset tag replacement

See more

How to implement the click-to-copy function in html5 pages (complete code)

Related articles