クリップボードにコピーする機能

クリップボードにコピーする機能を実装しています。

実装したい理由

IDを付与せず、Classに付与したい

参考URL

HTML
1<!-- コピー対象要素とコピーボタン -->
2<dl class="copy">
3	<dt><input class="copyTarget" type="text" value="コピー対象の文言" readonly></dt>
4	<dd><button onclick="copyToClipboard()">Copy text01</button></dd>
5
6	<dt><input class="copyTarget" type="text" value="コピー対象の文言" readonly></dt>
7	<dd><button onclick="copyToClipboard()">Copy text02</button></dd>
8
9	<dt><input class="copyTarget" type="text" value="コピー対象の文言" readonly></dt>
10	<dd><button onclick="copyToClipboard()">Copy text03</button></dd>
11</dl>

javascript
1function copyToClipboard() {
2	// コピー対象をJavaScript上で変数として定義する
3	// var copyTarget = document.getElementById("copyTarget"); IDをClassに変換したい。
4
5	var copyTarget = div.getElementsByClassName("copyTarget");
6
7	// コピー対象のテキストを選択する
8	copyTarget.select();
9
10	// 選択しているテキストをクリップボードにコピーする
11	document.execCommand("Copy");
12
13	// コピーをお知らせする
14	alert("コピーできました！ : " + copyTarget.value);
15}

実装したところ、IDだけはちゃんと動きますが、
複数タイプがある場合、Classに付与後、動かなくなりました。

ご教授お願いします。

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

回答2件

getElementsByClassNameと複数形になっているように、このメソッドはDOM要素の集合を返してきます。なので、それ以降のcopyTarget.select();などはうまく動きません。

「どのボタンを押しても同じ文言をコピーしたい」のでなければ、何らかの方法でボタンとコピー元の<input>を紐付ける必要があります。

投稿2019/12/17 02:55

maisumakun

総合スコア145184

ベストアンサー

他の回答者さんからも指摘がありますが、getElementsByClassNameは要素の集合を返しますので、何番目の要素が対象かを指定する必要があります。
いろいろ方法はあると思いますが、引数で何番目かを渡すというのが一番簡単そうです。

html
1<!-- コピー対象要素とコピーボタン -->
2<dl class="copy">
3    <dt><input class="copyTarget" type="text" value="コピー対象の文言0" readonly></dt>
4    <dd><button onclick="copyToClipboard(0)">Copy text01</button></dd>
5
6    <dt><input class="copyTarget" type="text" value="コピー対象の文言1" readonly></dt>
7    <dd><button onclick="copyToClipboard(1)">Copy text02</button></dd>
8
9    <dt><input class="copyTarget" type="text" value="コピー対象の文言2" readonly></dt>
10    <dd><button onclick="copyToClipboard(2)">Copy text03</button></dd>
11</dl>

js
1function copyToClipboard(i) {
2  // コピー対象をJavaScript上で変数として定義する
3  var copyTarget = document.getElementsByClassName("copyTarget")[i];
4  // コピー対象のテキストを選択する
5  copyTarget.select();
6  // 選択しているテキストをクリップボードにコピーする
7  document.execCommand("Copy");
8  // コピーをお知らせする
9  alert("コピーできました！ : " + copyTarget.value);
10}