Clipboard APIでページ内複数のテキストをクリップボードにコピーしたい

実現したいこと

Clipboard APIを利用してページ内のinput要素のvalueをすべてクリップボードへ貼り付けたい

前提

GASでwebアプリ（HTML）を作っており、その中の一つの機能として、ボタン押下1回でページ内のinput要素のvalueをクリップボードにコピーすることを目指しています。
今後の運用を考え、IDを一つずつ指定のアナログな方法が好ましいと思っています。
コピーする要素は連結されてはだめで、一つずつクリップボードにコピーしたいと思っています。
なおペーストは行わずコピーだけです。

発生している問題・エラーメッセージ

ソース内、最終の処理のみ適用されてしまいます。
※#test3のみコピーされる

該当のソースコード

javascript
1const copyToClipboard = ()=>{
2    let text = document.querySelector('#test1').value;
3    navigator.clipboard.writeText(text);
4    let text2 = document.querySelector('#test2').value;
5    navigator.clipboard.writeText(text2);
6    let text3 = document.querySelector('#test3').value;
7    navigator.clipboard.writeText(text3);
8};

試したこと

querySelectorAllなどでは今回の趣旨に合わないため個別のID対象としましたがいくつ増やしても減らしても、最終の要素しかコピーされません。

このAPIの使用は初めてのため基本的なことをわかっていないかもしれませんがよろしくお願いします。

int32_t

2023/07/12 00:49

> valueをすべてクリップボードへ貼り付けたい仮にそれができたとして、クリップボードに入った複数のデータをどうやって利用するつもりなのでしょうか?

Izumo1101

2023/07/12 00:52

今回の対象のページにある要素を、違うページの各項目に入力する必要があります。その際少しでも効率化するため、クリップボードから連続してペーストできるように、元ページの要素をあらかじめクリップボードへ一気にコピーしておきたいと考えています。

int32_t

2023/07/12 01:11 編集

macOS はそもそも標準ではクリップボードに複数の値は持てない気がします。 Windows は「windowsキー + v」でクリップボード履歴が確認できます。いずれにしても、Ctrl-V や ⌘-V でペーストされるのは最後の値だけです。

Izumo1101

2023/07/12 01:14

大事な情報が抜けていました。Windowsでの操作を前提としています。おっしゃる通りwinはクリップボードに履歴が複数残ります。ここから貼り付けますのでctrl+Vではなくクリップボードを押下することになりますので最後の値のみが貼り付けられるわけではありません。

int32_t

2023/07/12 01:17

Windows前提、了解しました。クリップボード履歴に、コードからコピーした最後のもの以外が入っていなかったという症状ですか?

Izumo1101

2023/07/12 01:19

ご認識の通りです。検証にあたってはクリップボードを空の状態にして関数を動かしていますが、履歴が一つしか入りません。入った一つは関数の最後のidのものになりますので、イメージとしては「クリップボードの中の一つの枠に3回上書きしている」感じでしょうか。

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

回答1件

ベストアンサー

ちょいと検証してみましたが、writeText() が完了してからある程度時間を置かないと履歴に残ってくれないようです。ブラウザの Clipboard API の仕様書には「後続の writeText() が前の writeText() をキャンセルする」というような挙動は書いてありませんでしたので、Windows のクリップボード履歴の仕様なのかもしれません。

下記コードのように writeText() の Promise の完了を待って、かつ500msの間隔を空けると履歴に3つ残りました。

js
1const copyToClipboard = async () => {
2    let text = document.querySelector('#test1').value;
3    await navigator.clipboard.writeText(text);
4    await new Promise(resolve => setTimeout(resolve, 500));
5    let text2 = document.querySelector('#test2').value;
6    await navigator.clipboard.writeText(text2);
7    await new Promise(resolve => setTimeout(resolve, 500));
8    let text3 = document.querySelector('#test3').value;
9    await navigator.clipboard.writeText(text3);
10};