• jQuery

webサイトにテキストコピーボタンを設置する方法【簡単】

こんにちは、カスミです。

さて以下のようなお悩みをお持ちでしょうか？

webサイトにテキストをコピー出来るボタンを設置したい。

このよな悩みを解決致します。

本記事では、jQueryを使って、テキストコピーボタンを設置する方法について解説致します。

※本記事ではjQueryを使うので、ライブラリを事前に読み込みましょう。

実装サンプルです。

コピーテキスト

実装サンプルです。

実際にボタンを押してみてください。

【テキストをコピーしました】というアラートが出て、コピーテキストというテキストがコピーされたかと思います。

次章より、実装コードを紹介します。

HTMLでボタンとコピー用テキストを用意する。

    <div class="copy-btn">ボタン</div>
    <p style="display: none;" id="copytext">コピーテキスト</p>

HTMLでコピーボタンとコピー用テキストのタグを準備します。

コピー用テキストの方はCSSのdisplay: none;等で非表示にしときましょう。

任意でコピーボタンにCSSを使って装飾してください。

jQueryコードを書く

  jQuery(function() {
    jQuery('.copy-btn').on('click', function() {
      let txt = jQuery('#copytext').text();
      let textarea = jQuery('<textarea></textarea>');
      textarea.text(txt);
      jQuery(this).append(textarea);
      textarea.select();
      document.execCommand('copy');
      textarea.remove();
      alert("テキストをコピーしました。");
    });
  });

最後に上記jQueryコードをscript内にコピペします。

セレクタ名を任意のクラス・ID値に変更してください。

サンプルでは以下のように割り振っています。

.copy-btn：コピーボタン
#copytext：コピー用テキスト

以上でテキストコピーボタンの完成です。

まとめ

ワードプレスを使ったブログで、記事のタイトルとURLをコピーするボタンを作る案件があったので、忘備録の為、本記事を書きました。

ぜひ参考にして見て下さい。

以上で、解説を終わります。