clipboard.jsの使い方

clipboard.jsの使い方

2016-08-13 最終更新日:2016-08-13

今回はテキストコピーをボタンひとつで実装する方法をご紹介します。

相手にテキストなどコピーさせたい場合にとても有効です。

clipboard.jsというライブラリを利用すると一発で解決です。使い方も簡単です。ブラウザではChrome、Firefox、IE 9以上、Operaが対象となっており、Safariが対象外となっております。

こちらが公式サイトですclipboard.js — Copy to clipboard without Flash


スポンサーリンク


使い方

使い方は簡単です。

html側ではコピーする内容にidを指定します。

そしてボタンにクラス名をつけてdata-clipboard-target属性にidを指定してあげれば良いだけです。

あとはclipboardjsを読み込んで下記スクリプトを設定しておけば完了です。

<input type="text" value="クリップボードにコピーするよ!" id="bar">
<button class="btn" type="button" data-clipboard-target="#bar">コピーする</button>

javascript

<script src="dist/clipboard.min.js"></script>
<script>
;(function() {
	'use strict';
	var clipboard = new Clipboard('.btn');
	clipboard.on('success', function(e) {
		e.clearSelection();
		console.info('Action:', e.action);
		console.info('Text:', e.text);
		console.info('Trigger:', e.trigger);
    });
	clipboard.on('error', function(e) {
		console.error('Action:', e.action);
		console.error('Trigger:', e.trigger);
	});

})();
</script>

⇒デモを見てみる


∞Tadashi Suyama∞

js clipboard クリップボード コピー
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Similar Posts

最近の投稿

アイキャッチ
電話番号の正規表現をJavaScriptを使ってチェック

さて今回はフォームの中での電話番号正規表現についてご紹介します。 電話番号を入力する際に携帯と固定電話どちらでも入力可能の場合にどちらの場合でも桁数チェックができるようにしたいと思います。今回...

19 Aug 2017

アイキャッチ
画面共有中だけ通知を一時的にオフ機能のMac用アプリMuzzle

本日はアプリのご紹介、画面を共有しているときやビデオ通話などをしているときに通知を一時的にオフにするアプリのご紹介です。 プレゼンの発表中などスクリーン共有やビデオ通話などの際に役立ちます。S...

13 Aug 2017

アイキャッチ
お盆休みのお知らせ

毎日の残暑、暑いですね。暑中お見舞い申し上げます。 平素より、大変お世話になっております。 さて、弊社では下記の予定で夏期休暇を実施させていただきますので、ご了承のほどよろしくお願い申し上げ...

10 Aug 2017

アイキャッチ
マルチOSのコマンドライン型ランチャーアプリzazu

Macには圧倒的な使いやすさのalfredがあるのですがそのようなランチャーがWindows環境でないか探してみたところありましたのでご紹介します。ただalfredにはまだ遠く及ばない気がします...

05 Aug 2017

アイキャッチ
MacでWinSCPを使う方法

Wine(ワイン)とは macOS上でWindowsソフトを動かすためのプログラムです。今年初めに2.0にアップデートされたようです。[Wine 2.0が公開](http://forest.wa...

30 Jul 2017

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

フッターイメージ