JavaScript初心者です。
pre
タグ内をクリップボードにコピーできるボタンを作りました。
該当のソースコード
JavaScript
1<script> function pre() { 2 var copyText = document.querySelector('.aaa'); 3 var range = document.createRange(); 4 range.selectNode(copyText); 5 window.getSelection().addRange(range); 6 document.execCommand("Copy"); 7 alert("コピーしました"); 8} </script>
pre
タグ内にボタンを設置したため、ボタンはコピーされないようにaaa
で囲った部分を対象としました。(pre
内のbutton
だけコピーしない方法などあれば、聞いておきたいです。)
HTML
1<pre> 2<button onclick="pre()">コピーする</button> 3<span class="aaa"> 4ここにcodeを書く 5</span> 6</pre>
上記で、コピーボタンの設置や動作は上手くいったのですが、記事内にpre
タグを複数設置した場合、一番上のaaa
で囲った部分しかコピーされないことに気づきました。
同一class
を使用したまま、個別にコピーできるようにするには、どうしたら良いでしょうか?
個別にコピーという表現が分かりづらかったと思い、画像を追記しました。
「teratail」のように、囲ったpreタグそれぞれをコピーできるようにしたいと思っています。
よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/01 01:24
2019/06/01 02:39
2019/06/01 02:50
2019/06/01 23:08
2019/06/02 00:59