【jQuery】クリップボードにコピーするボタンの設置

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クックブック(オライリー)

関連記事

コメントを残す

*