javascriptでクリップボードへ直接コピーさせる document.execCommand(‘copy’)

コピペ作業が多いようなチートシートなどを作るときにコピーする作業を省略できれば結構大きな作業短縮になったりします、コピーをするとしたら ctrl+c をしたり、選択範囲を右クリックしてコピーしたりして行いますが。

ということで javascript でクリックだけでコピーできるようにする方法を今回は紹介します。

document.execCommand(‘copy’) でクリップボードにコピーする

javascript で以下のコマンドを使うことで選択範囲をコピーさせることが出来ます

document.execCommand('copy')

document.execCommand のコマンドの引数に copy を指定すると、選択範囲をコピーする事ができます。document.execCommand にはコピー以外にもカットやフォントの変更など色々なコマンドが用意されています。

document.execCommand で使える引数はこちらで色々紹介されているので興味有る方はこちらを御覧ください
→ document.execCommand（MDN）

jQueryと組み合わせてテキストエリアをクリックで選択範囲を作りコピーさせる

$("textarea").on("click",function(){
 $(this).select();
 document.execCommand('copy');
});

テキストエリアをクリックしたときに、そのテキストエリアの値を select() で選択状態にして、document.execCommand(‘copy’) を実行してクリップボードにテキストをコピーさせる形になっています。

jQuery の select() は、テキストエリアで使えるもので、例えば pタグ hタグなどでは利用することが出来ません、これらのテキストをコピーしたいのならばこれらのテキストを一旦取得して textarea を生成してそこに val() でテキストを流し込み、その textarea を select() で選択状態にしてからクリップボードへコピーするコマンドを実行してやればOKです。

pタグやhタグ divタグなどをそのままコピーする場合はさらに一手間必要となります、こちらはテキストエディタにhtmlタグやcssなどを書式をそのままコピーしたい場合にはこちらの方法を使うことになります。

こちらの方法は次の記事で紹介しています

→ javascriptで対象タグを選択状態にする