• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

以下のページからclipboard.js-masterのファイルをダウンロードします。
テキストをクリップボードにコピーさせることができるプラグイン「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>
CDNもありますので、以下のページから最新版のclipboard.jsを読み込ませても良いです。

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


HTML

クリップボードにコピーしたい要素(テキスト)と、「クリップボードにコピー」のようなボタンを設置します。
<pre id="foo">
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

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

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

<button class="btn" data-clipboard-target="#foo">
   クリップボードにコピー
</button>
buttonタグのdata-clipboard-targetに、コピーの対象となる要素のIDを指定します。


以下にclipboard.js のデモを用意しました。
テキストにクリップボードにコピーするデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください