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

2022年8月7日2023年1月11日

「navigator.clipboard」というAPIを使って、クリック（タップ）することで特定の文章をコピーする方法を紹介します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います！

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

実装例とコード

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

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を使って、特定のカラーをクリックするとそのカラーコードをコピーできるツールを作成しています。