Android デバイスでは、「navigator.clipboard.writeText」の前に「alert()」があると、テキストをクリップボードに正常にコピーできないのはなぜですか?

Question

Android 上の Chrome で navigator.clipboard.writeText() を使用してテキストをコピーしようとすると、後で警告ボックスを表示しない限り、正常に動作します。一度alert()を表示すると機能しなくなりました。

たとえば、次のコードは期待どおりに機能します。

function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(copyText.value);
}

<input type="text" value="Hello world" id="myInput" style="width:auto">
<button onclick="myFunction()">copy</button>

ただし、以下のコードは機能せず、コンソールでエラーがスローされず、PC の Chrome では正常に機能しますが、Android では機能しません。

function myFunction()
{
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(copyText.value);
  alert("テキストが正常にコピーされました")
}

<input type="text" value="Hello world" id="myInput" style="width:auto" >
<button onclick="myFunction()" >copy</button>

何が起こったか知っている人はいますか?ありがとう。

Answer 1

理由 navigator.clipboard.writetext 機能しない理由:

1. 互換性の問題 : このメソッドは、document.exec("copy") メソッドが非推奨になった後に追加されました。 特定のブラウザ バージョンでは、この方法は機能しないため、この方法が利用可能かどうかを確認する必要があります。

2. ドキュメントがフォーカスされていません: ユーザーの操作なしでコンテンツをクリップボードに書き込むと、ブラウザーはリクエストをブロックし、このメソッドの間違いで Promise をスローします。ユーザーがインターネットからロードした文字列 (ajax) をコピーしたいと想像してください。この ajax リクエストに時間がかかると、ブラウザーのフォーカスが期限切れになり、私の経験ではコピーを完了できなくなります。

3. 不正なアクセス許可: ユーザーは、プライバシーとセキュリティの設定を編集することで、ブラウザが自動的にクリップボードにコピーできないようにすることがあります。コピーする前に、クリップボードへの書き込み権限を確認してください。ただし、ページがアクティブなタブにある場合、clipboard-write 権限がページに自動的に付与されます。

4. 非同期の問題: クリップボードへのコピーは非同期操作であるため、コードの作業が完了するまで待つ必要があります。

5. HTTP Web サイト: この機能は、サポートされている一部またはすべてのブラウザーの安全なコンテキスト (HTTPS) でのみ使用できます。

6. Apple Safari の問題: Apple の Clipboard API は、ほとんどの場合、クリップボードに書き込むときに Promise を期待します。したがって、ClipboardItem を使用して、Promise を write メソッドに渡すことができます。 writeText

   の代わりに write を使用することをお勧めします。

話しやすいです、コード:

を見せてください リーリー ＃＃＃＃＃＃使用法＃＃＃：＃＃＃ リーリー

重要なヒント: コンソールではなく、ボタンと

onclick

イベントを介してテストします。

Answer 2

navigator.clipboard.writeText メソッドは Promise を返し、コードはその結果を待ちません。

次のコードに従って修正すれば問題ありません:

リーリー

Promise メソッドと navigator.clipboard.writeText メソッドの詳細については、次のリンクを参照してください:
JavaScript.infoに関する約束
MDN でのクリップボードの操作