【JavaScript】クリックで特定の文章をコピーする

2023年6月10日

navigator.clipboard.writeText()というAPIのメソッドを使い、クリック（タップ）することで特定の文章をコピーするJavaScriptの実装方法を紹介します。

従来はdocument.execCommand('copy')という関数を使っていましたが、こちらの関数は現在非推奨となっているため、本記事では解説しません

自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います！

navigator.clipboard.writeText()の実装例

下のボタンをクリックすると、この文章をクリップボードにコピーできます。

Windowsでは、ショートカットキー：［Windows］＋［V］を使うことで、クリップボードの履歴を確認できる機能があります。コピーした内容を複数保存できるので、個人的には非常に便利なショートカットキーですね。

JavaScriptのClipboard APIを使うと、実装例のようにボタンクリックで特定のテキストをコピーできます！

navigator.clipboard.writeText(p.textContent).then(
  () => {
    // コピーに成功したときの処理
  },
  () => {
    // コピーに失敗したときの処理
  });

navigator.clipboard.writeText('コピーする内容')と記述することで、引数に指定した内容をクリップボードにコピーできます。

コピーに成功したときと失敗したときの処理も記述でき、何も書かなくてもOKですが、本実装例のようにalert()でメッセージを表示させるとわかりやすいでしょう。

また、一部の古いブラウザ（IEなど）では動作しません。
ChromeやEdge、Firefox、Safariは動作します。

加えて、HTTP環境でも動作しません。（クレジットカードなどの重要情報をコピーされてしまうのを防ぐため。）
この機能を使う使わないに関わらず、WebサイトはHTTPS環境にしておきましょう。

「Navigator.clipboard」の詳細は公式サイトにてご確認ください。

HTML/JavaScript コード

<p>下のボタンをクリックすると、この文章をクリップボードにコピーできます。</p>
<button>上記の文章をコピーする</button>
<textarea placeholder="ここにペーストしてコピーできたか確認できます。"></textarea>

const p = document.querySelector('p');
const button = document.querySelector('button');

button.addEventListener('click', () => {
  if (!navigator.clipboard) {
    alert("このブラウザは対応していません");
    return;
  }

  navigator.clipboard.writeText(p.textContent).then(
    () => {
      alert('文章をコピーしました。');
    },
    () => {
      alert('コピーに失敗しました。');
    });
});

ブラウザが未対応の場合に備え、if (!navigator.clipboard) {}でalert()を出し、早期リターンするようにしています。

navigator.clipboard.writeText()の応用実装例

navigator.clipboardを使って、特定のカラーをクリックするとそのカラーコードをコピーできるツールを作成しています。

投稿が見つかりません。

またこちらの記事では、コピーしたときの表示をアラートではなく、それぞれのカラーの下に自動表示させるアコーディオンのような方式にしています。特定のメッセージを表示させる方法については以下記事も合わせてご覧ください。