【jQuery】テキストをクリップボードにコピーする方法【コピペOK】

こんにちは。菜笑[なえ] (@nae310_)です。

今回はコピーするボタンを押したときに、任意のテキストをクリップボードにコピーする方法についてです。

完成図

こちらのCopyというボタンを押すと「コピーするテキスト」という文章がコピーされます。
どこかに貼り付けて実際にコピーされていることを確認してみてください。

See the Pen clipboard copy by NaeSato (@N310) on CodePen.

完成コード [コピペOK]

コピーする文章、ボタン、コピーされた時のアラート文章
というシンプルな構成で作っているので、デザインはアレンジしてみてください。

HTML

<p id="js-copytext">コピーするテキスト</p>
<button type="button" id="js-copybtn">Copy</button>
<p id="js-copyalert" class="copy_alert">コピーできました！</p>

jQuery

$(function() {
  $('#js-copybtn').on('click', function(){
    // コピーする文章の取得
    let text = $('#js-copytext').text();
    // テキストエリアの作成
    let $textarea = $('<textarea></textarea>');
    // テキストエリアに文章を挿入
    $textarea.text(text);
    //　テキストエリアを挿入
    $(this).append($textarea);
    //　テキストエリアを選択
    $textarea.select();
    // コピー
    document.execCommand('copy');
    // テキストエリアの削除
    $textarea.remove();
    // アラート文の表示
    $('#js-copyalert').show().delay(2000).fadeOut(400);
  });
});

CSS

.copy_alert {
  display: none;
}

解説

コピーするにはdocument.execCommand('copy');を使用します。
これは選択している文字列をコピーするものになるので、普通のテキストをコピーする場合には以下の手順を踏む必要があります。

• <textarea> を作成
• 作成した<textarea> にコピーするテキストを挿入
• <textarea> を選択状態にする
• 選択されているテキストをコピー
• 作成した<textarea> を削除

少し手順が多く感じるかもしれませんが、とりあえず上記のコードをコピーして使えば大丈夫です！

もし<p>などの文字列ではなく<textarea>や<input type="text"> に入っている文字をコピーしたいのであれば、JSの記述がかなり短くなります。
その場合はこちらのコードを使用してください。

See the Pen clipboard copy textarea by NaeSato (@N310) on CodePen.

各ブラウザ対応状況

execCommand の各ブラウザ対応状況はこちらで確認できます。
Can I use…

IE10以前を未対応ですが、それ以外は大丈夫です。

おわりに

ボタンを押してコピーというのは最近いろんなところで使われているので実装の機会も多いと思います。
ライブラリなどもありますが、自分で書いてもそんな大変ではないので、ライブラリを使うほどでもないですね。

ボタンがなくてもコピーはできますが、あった方が親切な場合も多々あると思うので、必要に応じて実装してあげましょう。

SNS

Twitter：@nae310_
Instagram：310nae