jQueryでクリップボードにテキストをコピーする方法！
jQueryでユーザーのクリップボードにテキストをコピーする方法についてサンプルコード付きで解説します。ユーザーがすぐにコピペできるようにテキストをクリップボードへコピーするボタンを用意しましょう。
jQueryでクリップボードにテキストをコピーしたい
jQueryを使ってテキストエリアやその他の要素のテキストをユーザーのクリップボードにコピーして、ユーザーがコピペ出来るようにしたいというケースがあります。
今回はjQueryを使ってテキストエリアとそれ以外の要素の場合で、ユーザーのクリップボードにテキストをコピーする方法をサンプルコード付きで解説します。
jQueryでクリップボードにテキストをコピーする方法
テキストエリアのテキストをクリップボードにコピー
それではテキストエリアのテキストをクリップボードにコピーしてみましょう。下記のサンプルコードを確認しましょう。
上記のサンプルコードのプレビューの「クリップボードにコピーする」ボタンを押すとテキストエリアにあるテキストがコピーされ、「クリップボードにコピーしました」とアラートが表示されるかと思います。
解説
HTMLではテキストエリアとコピーのトリガーとなるボタンを用意します。
JavaScript側ではjQueryのonメソッドで、トリガーとなるボタンがクリックされた際のイベントにexecCopy関数を紐付けします。
execCopy関数ではjQueryでクリップボードへのコピーの媒体となるtextarea要素を生成し、コピーするテキストを生成したtextarea要素に設定しています。生成したtextarea要素はjQueryのappendメソッドで実際にbody要素配下に一時的に挿入されます。
// 選択状態にする
clipboard.select();
// WebExtension APIのブラウザ拡張の仕組みを呼び出しクリップボードにコピー
document.execCommand('copy');そして上記のコードで、生成したtextarea要素を選択状態にして、document.execCommandを通してクリップボードにコピーします。
document.execCommandはWebExtension APIのブラウザー拡張の仕組みで、ユーザー側のシステムのクリップボードと連携することが可能になります。引数にcopyを渡せば、クリップボードへのコピー、cutを渡せば切り取りが可能です。
ただしモダンなブラウザではほぼ対応していますが、全てのブラウザで対応している訳ではないことを注意しておきましょう。document.execCommandが対応しているブラウザは下記から確認することが出来ます。
それ以外の要素のテキストをクリップボードにコピー
次にテキストエリア以外の要素のテキストをクリップボードにコピーさせる方法です。下記のサンプルコードを見てみましょう。
上記のサンプルコードのプレビューページの最下部にある「クリップボードにコピーする」ボタンを押すとp要素のテキストがクリップボードにコピーされます。無事にクリップボードにコピーされると「クリップボードにコピーしました」とアラート表示されるはずです。
p要素などテキストエリア以外の要素についてもやり方はほぼ同じで、唯一の違いはテキストの取得方法がp要素の場合はjQueryのtext()メソッドで取得している点です。
このようにjQueryを使えば簡単にユーザーのクリップボードにテキストをコピーする事が出来ます。ぜひご活用下さい。
