利用clipboard.js实现点击按钮复制内容到剪贴板
clipboard.js下载地址:https://codeload.github.com/zenorocha/clipboard.js/zip/master
<!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 属性,它的值是点击后需要复制的内容。