ボタンをクリックしてテキストをコピーする機能をjsで実現します

説明

テキストをクリップボードにコピーするボタンをクリックしたいのですが、ネットでいろいろ調べたのですが、動作の問題なのかその他の理由なのかわかりませんが、とにかく正常に動作しません。
インターネット上にはプラグインがありますが、そのプラグインもデータテーブルのテーブルに配置すると無効になります。その後、何度も試行した後、実行可能なものを作成したと見なすことができます。

達成

これは、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 タグを使用してページに元のコンテンツを表示し、入力を使用してコピーするコンテンツを受け入れます。コピー ボタンをクリックした後、入力の ID が js に渡されます。メソッドを実行すると、id を通じて入力属性が検出され、入力の内容がクリップボードにコピーされます。

jsコード:

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

ここで、ページ上の入力ボックスの表示が見た目に影響を与えると思われる場合は、入力のサイズを 0.01px 以下に設定できますが、hidden 属性を設定するとコピー コマンドは有効になりません。ここでは要素IDの一意性を確保するため、カスタマイズ可能なバックグラウンドから送信されるデータのIDを使用していますが、jsでuuidを生成することも可能です。