質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
コピー

元のオブジェクトを破壊することなく、オブジェクトの複製を生成することをコピーと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1916閲覧

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

Palo_Punte

総合スコア21

コピー

元のオブジェクトを破壊することなく、オブジェクトの複製を生成することをコピーと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/06/04 15:56

(やりたい事)
$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は使用してもしなくても構いません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

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で抜き出せばいいのではありませんか?
Palo_Punte

2020/06/05 15:04

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

2020/06/05 16:32

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

0

まず、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');

投稿2020/06/05 01:44

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Palo_Punte

2020/06/05 16:33

ご回答ありがとうございました こちらも参考にさせて頂きます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問