セルをクリックし、複数箇所をクリップボードにコピーをする方法

（やりたい事）
$v.Nameのセルをクリックすると

$v.Name（改行）
$v.Article（v.Urlのリンクつき）

をクリップボードにコピーができるようにしたいです

<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js"></script>
</head>
<body>
<table>
    <tr>
        <th>時間</th>
        <th>名前</th>
        <th>記事</th>
    </tr>
    {{range $i, $v := .new_arrival_all}} //databaseからデータを繰り返し文で取り出しています
    <tr>
        <td>{{$v.Create_time}}</td>
        <td id="copy_{{$i}}" class="copy" data-clipboard-target="#copy_{{$i}}">{{$v.Name}}</td>
        <td id="copy_{{$i}}"><a href={{$v.Url}}>{{$v.Article}}</a></td>
    </tr>
    {{end}}
</table>
</body>
<script>
    new Clipboard('.copy');
</script>
</html>

clipboard.js（https://github.com/zenorocha/clipboard.js/）で試してみたのですが
・複数箇所のコピーをしてくれない
・$v.Articleが取れてもリンク付きになってくれない
という問題があり作業が止まってしまっています

これはどのようにすれば良いのでしょうか？
実現ができればclipboard.jsは使用してもしなくても構いません。

行動規範の内容に同意します

回答2件

ベストアンサー

お試しください。
サンプル

js
1function copyOverrideOnce(s){
2  document.addEventListener('copy', function(e){
3      e.clipboardData.setData('text/plain', s);
4      e.preventDefault();
5    },
6    {once:true}
7  );
8}
9function _copy(s) {
10  copyOverrideOnce(s);
11  document.execCommand("copy");
12}
13
14document.getElementById('copy_{{$i}}').addEventListener( 'click', e => _copy( `${e.target.textContent}\n${e.target.nextElementSibling.innerHTML}` ) )

本当は、Clipboard APIを使うのがいいんでしょうけれど、今のところブラウザ互換が厳しいです。
Clipboard - Web API | MDN

投稿2020/06/05 02:03

Lhankor_Mhy

総合スコア36960

Palo_Punte

2020/06/05 07:08

ありがとうございます getElementById('copy_{{$i}}')の{{$i}}はrangeのローカル変数でbodyの一番したにscriptを書いてもアクセスができないのですがこれはどこに記載をすれば良いのでしょうか？ rangeの中に入れようと{{end}}の前にscriptを書いてみても動作がうまくできませんでした

Lhankor_Mhy

2020/06/05 07:13

テンプレートについては特に条件がなかったので考慮していません。適切に要素を抜き出してください。情報が不足しているのでわかりませんが、classで抜き出せばいいのではありませんか？

Lhankor_Mhy

2020/06/05 07:20

こういうことですか？ https://jsfiddle.net/Lhankor_Mhy/90r1jy3L/1/

Palo_Punte

2020/06/05 15:04

本当にご丁寧にありがとうございますエラーはなく動作いたしましたただ「名前 <a href="https://〜>記事</a>」となってしまい記事の文章にハイパーリンクがつけれないのですがここはどのようにすれば良いのでしょうか？

Palo_Punte

2020/06/05 16:32

大変申し訳ございませんこちらの勘違いでこれで大丈夫でした本当に申し訳ございませんご親切にありがとうございますとても助かりました

行動規範の内容に同意します

まず、td.class = 'copy' の要素にしか反応しません。
クリックするとその行が選択状態になります。
その上で、手作業（[ctrl]+[c]）でコピーします。
あと、戻り値であるHTMLの定義があいまいです。

js
1
2class Clipboard {
3  constructor (css) {
4    this.css = css;
5    this.current = null;
6
7    document.addEventListener ('click', this, false);
8    document.addEventListener ('copy', this, false);
9  }
10
11  set tr (e) {
12    let
13      selection = window.getSelection(),
14      range = document.createRange();
15    
16    range.selectNodeContents(e);
17    selection.removeAllRanges();
18    selection.addRange(range);
19
20    this.current = e;
21  }
22
23
24  get html () {
25    let [td,td2] = this.current.querySelectorAll (`td.${this.css}, td.${this.css}+td`);
26    let html = td.innerHTML +'<br>' + td2.innerHTML;
27    return html;
28  }
29
30
31  handleEvent (event) {
32    switch (event.type) {
33    case 'click' :
34      let e = event.target;
35      if (e.classList.contains (this.css))
36        this.tr = e.closest ('tr');
37      break;
38
39    case 'copy' :
40      event.clipboardData.setData ("text/html" , this.html);    
41      event.preventDefault();
42      break;
43    }
44  }
45}
46
47new Clipboard('copy');