[JS]テキストをクリップボードにコピーさせることができるプラグイン「clipboard.js」

jQueryプラグイン・ライブラリ

2015.02.20

ソースコードやテキストをクリップボードにコピーしてもらうのに便利なjQueryプラグインclipboard.jsのご紹介です。

clipboard.js ファイルのダウンロード
Javascript
HTML

clipboard.js ファイルのダウンロード

以下のページからclipboard.js-masterのファイルをダウンロードします。
clipboard.js

テキストをクリップボードにコピーさせることができるプラグイン「clipboard.js」

Javascript

<head>タグ内でjqueryファイルと一緒にclipboard.min.jsファイルを読み込ませます。

<script src="./jquery.min.js"></script>
<script src="./clipboard.min.js"></script>
<script>
$(document).ready(function(){
	var clipboard = new Clipboard('.btn');

	clipboard.on('success', function(e) {
	    e.clearSelection();
	    alert('テキストをクリップボードにコピーしました');
	});
});
</script>

$(document).ready(function(){

var clipboard = new Clipboard('.btn');

clipboard.on('success', function(e) {

e.clearSelection();

alert('テキストをクリップボードにコピーしました');

});

</script>

CDNもありますので、以下のページから最新版のclipboard.jsを読み込ませても良いです。
https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers

また、clipboard.js提供元のサイトでは、クリップボードへのコピー成功時のメッセージをツールチップで表示していましたが、今回はalertでメッセージを出すようにカスタマイズしています。

HTML

クリップボードにコピーしたい要素（テキスト）と、「クリップボードにコピー」のようなボタンを設置します。


あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

またそのなかでいっしょになったたくさんのひとたち、
ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、
山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、
みんなむかし風のなつかしい青い幻燈のように思われます。

では、わたくしはいつかの小さなみだしをつけながら、
しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

<button class="btn" data-clipboard-target="#foo">
   クリップボードにコピー
</button>