clipboard.js复制功能实现

拼搏现实的明天。 2022-05-18 09:05 391阅读 0赞

前言

clipboard.js是前端实现复制文本到剪贴板的插件，简单记录一下使用方法。

具体使用

1.简单的demo

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>测试页面</title>
  6.     <script src="../js/clipboard.min.js"></script>
  7.     <script> var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) { alert('复制成功！'); }); clipboard.on('error', function(e) { console.log(e); }); </script>
  8. </head>
  9. <body>
  10.     <div id="msg">hello world</div>
  11.     <button class="btn" data-clipboard-action="copy" data-clipboard-target="#msg">Copy</button>
  12. </body>
  13. </html>

copy可以用cut。

2.简单的例子
如果你希望动态设置 target，你需要返回一个节点（Node）

  1. new Clipboard('.btn', {
  2.     target: function(trigger) { 
  3.         return trigger.nextElementSibling;
  4.     }
  5. });

如果你希望动态设置 text，你需要返回一个字符串。

  1. new Clipboard('.btn', {
  2.     text: function(trigger) { 
  3.         return trigger.getAttribute('aria-label');
  4.         //return $("#msg").val()
  5.     }
  6. });

发表评论

表情：
评论列表 （有 0 条评论，391人围观）

还没有评论，来说两句吧...

相关阅读