一、前言

最近在学习将clipboard.js引入到网页来实现复制、剪切等功能,网上有许多的使用教程可供学习。
但是,如果网页中有多个相同按钮,点击不同按钮复制不同文本该如何实现呢?
无奈本人才疏学浅、文科男一枚没有多少基础。在搜索引擎找了半天都没有找到,最后还是得靠自己啊。突然灵光乍现,想到一个方法:先判断点击的是第几个按钮,然后就复制第几个文本不久行啦。
折腾一会儿后,终于搞定,现在写个文章做为记录,也供大家参考。

二、效果如图

clipboard.js实现网页多个相同按钮复制不同对象的方法

三、DEMO代码

<!DOCTYPE html>
<html lang="en">
 <head> 
  <title>demo</title> 
 </head> 
 <body> 
  <button class="copy">复制</button> 
  <textarea id="codecopy">11111111</textarea> 
  <button class="copy">复制</button> 
  <textarea id="codecopy">22222222</textarea> 
  <button class="copy">复制</button> 
  <textarea id="codecopy">33333333</textarea>  
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> 
  <script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script> 
  <script>
var num;
$(function () {
    $('.copy').each(function (num) {
        var clipboard = new ClipboardJS(this, {
                text: function () {
                    return document.querySelectorAll('#codecopy')[num].value;
                }
            });
        clipboard.on('success', function (e) {
            console.log(e);
        });
        clipboard.on('error', function (e) {
            console.log(e);
        });
    });
});
</script> 
 </body>
</html>

如果您有更好的办法,欢迎在下面留言。

文章目录