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をコピーするボタンを作る案件があったので、忘備録の為、本記事を書きました。
ぜひ参考にして見て下さい。
以上で、解説を終わります。
目次