jQueryのみでクリップボードにコピーするボタンの設置する方法です。
ボタンのクリックでURLを値として取得し、
.success
を表示してコピー完了した旨を知らせるという挙動です。
以下のHTMLとjQuery以外にも.success
にCSSdisplay:none;
などを適宜適用しておきます。
SNSのシェアボタンと並べて使うことを想定してa
タグにしていますが、href
を設定していないとマウスオーバーしてもポインターに変わらないので、CSSにcursor:pointer;
も設定しておくと良いです。
SNSのシェアボタンと並べて使うことが多いのでこちらのページも併せて確認しておくと良いでしょう。
<a id="copy-url" data-url="https://sample.com/">リンクをコピー</a>
<div class="success">コピーしました</div>
$(function () {
$('#copy-url').click(function () {
// 値の取得
const url = $(this).data('url');
// コピー
navigator.clipboard.writeText(url);
// メッセージ表示
$('.success').fadeIn("slow", function () {
$(this).delay(2000).fadeOut("slow");
});
});
});
参考:https://ungifted.tech/blog/copy-to-clipboard/
【jQuery参考書】
■初級・入門向け
10日でおぼえるjQuery入門教室 第2版
■中級・実務向け
jQueryポケットリファレンス (POCKET REFERENCE)
■上級・開発向け
jQueryクックブック(オライリー)
■初級・入門向け
10日でおぼえるjQuery入門教室 第2版
■中級・実務向け
jQueryポケットリファレンス (POCKET REFERENCE)
■上級・開発向け
jQueryクックブック(オライリー)