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

JavaScriptコード集:クリックするだけで特定の文章をコピーするコード

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

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

目次

実装例とコード

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


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

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

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

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

また、一部のブラウザ(IEなど)では動作しません。(ChromeやEdge、Firefox、SafariはOK。)
加えて、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を使って、特定のカラーをクリックするとそのカラーコードをコピーできるツールを作成しています。

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次