ミギムキ

[jQuery] テキストエリアの内容をクリップボードにコピーするボタンを設置したい

公開日:2018/11/11 更新日:2020/03/01

当サイトでは、サンプルコードをワンクリックでコピーするボタンを設置しています
このようなクリップボードへのコピー処理も、JavaScriptのexecCommandというメソッドを使って手軽に実現することができます
JavaScriptでの実装例はこちら
2019/12/27：加筆、修正しました

サンプルコード

html

<textarea></textarea>
<button class="copy_clipboard">クリップボードにコピー</button>

jQuery

jQuery(function($) {
    $('.copy_clipboard').click(function() {
        var clipboard = $('<textarea></textarea>');
        clipboard.val($(this).prev().val());
        $(this).append(clipboard);
        clipboard.select();
        document.execCommand('copy');
        clipboard.remove();
    });
});

仮のテキストエリアを作成し、そこにコピー対象となるテキストエリアの文章を写します
その後、仮テキストエリアを選択状態にしてから「document.execCommand('copy');」を実行しています
テキストエリアを直接選択状態にしてexecCommandを実行してもいいのですが、その場合、テキストエリアが選択状態（枠に色がつく）になってしまいます（あくまで見た目だけの問題です）
コピー対象となるテキストエリアを「$(this).prev().val()」で取得し、クリックしたボタンの前の要素から文字列をコピーするようにしています
これによりページ内にボタンを複数個設置しても、それぞれのテキストエリアから文字列がコピーされます

textarea以外の要素からコピーする場合

html

<code>ソースコード</code>
<button class="copy_clipboard">クリップボードにコピー</button>

jQuery

jQuery(function($) {
    $('.copy_clipboard').click(function() {
        var clipboard = $('<textarea></textarea>');
        clipboard.val($(this).prev().html());
        $(this).append(clipboard);
        clipboard.select();
        document.execCommand('copy');
        clipboard.remove();
    });
});

変更点は一箇所だけ。要素から文字列をコピーするときの処理を「$(this).prev().val()」から「$(this).prev().html()」に変更しています

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。