Written by Kasumi

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

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

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

目次

関連記事

jQuery

jQueryで画像読み込み完了後にイベントを実行する方法

更新日:2022.09.09
1676
jQuery

bxsliderでスライダー内画像のaタグリンクが効かない時の対処方法【結論slickを使おう】

更新日:2022.11.25
1271
jQuery

jqueryを使って要素を移動・追加・親要素を作成する方法【簡単テンプレ公開】

更新日:2022.09.09
1776
jQuery

スムーズスクロール機能をjavascript(jquery)を使用し実装する方法

更新日:2022.09.09
1189