ミギムキ

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

サンプルコード

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です。