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

このエントリーをはてなブックマークに追加
PR

コピペ作業が多いようなチートシートなどを作るときにコピーする作業を省略できれば結構大きな作業短縮になったりします、コピーをするとしたら 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で対象タグを選択状態にする

 

document.execCommand(‘copy’) のブラウザ対応

document.execCommand('copy')

こちらのコマンド、一部ブラウザでは対応していない場合があるようです。IEなら9以降でChromeやfirefoxなら最新版では対応しています、IEではクリップボードへコピーするかどうかの問のダイアログが出てきますが、Chromeやfirefoxでは何も表示無くコピーする事が可能でした。

 

おわりに

コピーさせるだけは、document.execCommand(‘copy’) だけで出来てしまって意外と簡単です。実際には選択範囲の指定などの処理と組み合わせて使うことになると思いますが、テキストエリアなら手軽にコピーさせることができるので結構便利です。

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)