js实现点击按钮复制文本功能

描述

想试下点击按钮将文本复制到剪贴板，从网上找了好多，不知道是不是操作有问题还是其他原因，反正就是不能正常使用。
网上有插件，但是那个插件放到datatables的表格里面也是无效的。后来经过多种尝试，算是写了个能用的。

实现

我这个是在datatables插件渲染的表格里面，给表格里面的数据增加了一个复制的按钮，然后将表格里面的东西复制到剪切板。
html：

"columns": [
                    {
    
    
                        "data": "", "defaultContent": "", "render": function (data, type, row) {
    
    
                            let id = row['id'];
                            var name = row['name'];
                            let pp = ' <input class="copy"  id="' + id + '" value="' + name + '"/>';
                            let text = '<p>' + name + '</p>';
                            let ccc = "<button class='layui-btn layui-btn-sm' οnclick=\"copyText('" + id + "')\">copy</button>"
                            return text + pp + ccc;
                        }
                    },
                    {
    
    
                        "data": "url", "defaultContent": "", "render": function (data, type, row) {
    
    
                            let id = row['id'];
                            id += '2';
                            var url = row['url'];
                            let pp = ' <input class="copy" style=" "  id="' + id + '" value="' + url + '"/>';
                            let text = '<p>' + url + '</p>';
                            let ccc = "<button class='layui-btn layui-btn-sm' οnclick=\"copyText('" + id + "')\">copy</button>"
                            return text + pp + ccc;
                        }
                    },
                ],

上面代码中在页面使用p标签显示原本内容，然后用input承接需要复制的内容，copy按钮被点击后将input的id传递给js方法，然后通过id找到input属性，将input的内容复制到剪贴板。

js代码：

    function copyText(id) {
    
    
        var Url2 = document.getElementById(id);
        Url2.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        layer.msg('复制成功')
    }

这里如果觉得input框显示在页面影响美观，可以将input的大小设置为0.01px，或者更小，如果设置隐藏属性，则这个复制命令不会生效。这里为了保证元素id的唯一性，我使用了后台传来的数据的id，也可以自定义，用js生成个uuid也是可行的。