1. ホーム
  2. javascript

[解決済み] FireFox、Safari、Chromeでテキストをコピーしてクリップボードに置く

2022-09-12 18:17:52

質問

Internet Explorerでは、クリップボードにアクセスするためにclipboardDataオブジェクトを使用することができます。FireFox、Safari、Chromeでそれを行うにはどうしたらよいでしょうか。

どのように解決するのですか?

現在、ほとんどのモダンブラウザで、以下の方法で簡単にこれを行うことができます。

document.execCommand('copy');

現在選択されているテキストをコピーします。textAreaやinputフィールドを選択する場合は

document.getElementById('myText').select();

テキストを目に見えないようにコピーするには、textAreaを素早く生成し、ボックス内のテキストを変更し、それを選択し、コピーし、textAreaを削除することができます。ほとんどの場合、この textArea は画面上に点滅することさえありません。

セキュリティ上の理由から、ブラウザはユーザーが何らかのアクションを起こした場合のみコピーを許可します (たとえば、ボタンをクリックした場合など)。これを行う 1 つの方法は、テキストをコピーするメソッドを呼び出す html ボタンに onClick イベントを追加することです。

完全な例です。

function copier(){
  document.getElementById('myText').select();
  document.execCommand('copy');
}
<button onclick="copier()">Copy</button>
<textarea id="myText">Copy me PLEASE!!!</textarea>