利用clipboard.js实现点击按钮复制内容到剪贴板

clipboard.js下载地址：https://codeload.github.com/zenorocha/clipboard.js/zip/master

官网：https://clipboardjs.com/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>target-input</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <!-- 1. Define some markup -->
    <input id="foo" type="text" value="hello">
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

    <!-- 2. Include library -->
    <script src="../dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->
    <script>
    var clipboard = new ClipboardJS('.btn');

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>
</html>

　　在 <button> 标签中添加了一个 data-clipboard-target 属性，它的值是需要复制的 <input> 的 id，顾名思义是从整个标签中复制内容。

<div id="btn" data-clipboard-text="1">
	<span>Copy</span>
</div>

　　在标签内添加 data-clipboard-text 属性，它的值是点击后需要复制的内容。

posted @ 2020-09-23 15:02  蝶花残梦  阅读(351)  评论(0)    收藏  举报
Live2D