JavaScript コピー機能

前提・実現したいこと

プログラミング初学者です。
現在JavaScriptを使ったコピー機能を作成しています。

(画面イラスト)

　[14][20][20][20]

[コピーボタン]

(希望)
・4つのテキストエリアに入力した値をコピーボタン押下後に全てコピーしたいです。

一つのテキストエリアに入力した値をコピーするコードをかけたのですが、
複数のテキストエリアの入力値がコピーできません。

初学者でなにもわからずつまずいています。
教えていただけると幸いです。よろしくお願いいたします。

該当のソースコード

JavaScript
1  <html>
2  <body>
3  <!-- コピー対象要素とコピーボタン -->
4      <input class="copyTarget" type="text" value="">
5      <br><button onclick="copyToClipboard()">コピー</button>  
6  </body>
7   <script>
8    function copyToClipboard() {
9        // コピー対象をJavaScript上で変数として定義する
10        var copyTarget = document.getElementsByClassName("copyTarget");
11
12        // コピー対象のテキストを選択する
13        copyTarget.select();
14
15        // 選択しているテキストをクリップボードにコピーする
16        document.execCommand("Copy");
17
18        // コピーをお知らせする
19        alert("コピーできました！ : " + copyTarget.value);
20    }
21   </script>

Zuishin

2020/07/12 02:59

わかったのかわからなかったのか何か言ってください。

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

回答2件

非表示のテキストをコピーする方法がいくつかみつかりました。
非表示のコントロールを作り、対象文字列をそこに入れ、そしてコピーすればいいのではないかと思います。

JavaScript - クリップボードへのコピーでinput要素を非表示にしたい｜teratail
JavaScript - textareaを非表示にした状態で値をクリップボードコピーしたい｜teratail
非表示のtextareaの値をクリップボードにコピーする(clipboard.js) | プロガジ.DEV

投稿2020/07/09 13:46

Zuishin

総合スコア28669

Zuishin

2020/07/09 14:01

最初の方法がコントロールを作らなくていいのでおすすめです。

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

（例）
var text = text1 + text2 + text3 + text4;
$(this).append('<textarea class="clipbtextarea">' + text + '</textarea>');
$('.clipbtextarea').select();
document.execCommand("Copy");

上記の様にすれば如何でしょうか。
以下の参考サイトも一つのエリアですが、コピーする時に一時$().append()でtextareaに文字を入れそれをクリップボードにコピーしてるので、textareaに入れる時に4つのエリアの文字を連結すれば良いかと思いましたが如何でしょうか。

[参考サイト]
クリップボードにJavaScriptでテキストをコピーする方法
https://dad-union.com/javascript/581

投稿2022/05/15 06:29