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をコピーするボタンを作る案件があったので、忘備録の為、本記事を書きました。

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

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

Ads

関連記事

WordPress プログラミング

【簡単】カスタム投稿のタクソノミーページでパーマリンクからタクソノミー名を削除し、ターム名のみにする方法

2022.01.30
301
HTMLCSS プログラミング

【簡単CSS】横スクロールできない問題を解決する方法

2022.03.16
56
WordPress プログラミング

【popular posts】WPP_Queryクラスを使い、ランキングをカスタマイズして表示しよう。

2021.10.20
181
WordPress プログラミング

【wordpress】全テンプレートページで使用可能なグローバル変数を定義する方法【簡単】

2022.02.23
91