JavaScriptでクリップボードにコピーするボタンを設置する方法

JavaScriptでクリップボードにデータをコピーしたい場合、clipboard.jsを使用すると簡単に実装することができます。clipboard.jsはMIT Licenseのオープンソース・ソフトウェアで、実装している機能をサポートしているブラウザはChrome 42以上、Firefox 41以上、IE9以上、Opera29以上です。Safari9.1はサポートしていません。

clipboard.jsを読み込む

clipboard.jsを使用するためには、script文で以下のファイルを読み込むことで使用することができます。
https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js

または、以下のURLからライブラリをダウンロードし、distディレクトリ内のコードを読み込んでも使用することができます。
https://github.com/zenorocha/clipboard.js

clipboard.jsの指定方法

clipboard.jsを使用するには、処理の実行を指定するbutton要素とスクリプトの処理内容を以下のように記述します。

button要素に設定する内容

class clipboard.jsの処理を記述するスクリプトに指定するクラス名
data-clipboard-action "copy"または"cut"を指定、
指定が無い場合は”copy”処理が行われる
data-clipboard-text コピー対象のテキストをbuttonに記述する場合に使用する
data-clipboard-target テキストエリア内のテキストを処理対象とする場合にテキストエリアに指定したid名を指定する

スクリプトの処理方法の書き方

処理後に呼ばれる関数には、次の変数が返されます。

e.action data-clipboard-actionで指定した内容
e.text クリップボードにコピーされた内容
e.trigger  処理を実行したbuttonの内容

サンプルコード

以下のコードはクラス名がbtnのbutton要素に対して処理を行っています。

サンプルプログラム


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集