clipboard.jsの使い方

Aug 13, 2016

clipboard.jsの使い方

2016-08-13 最終更新日:2016-08-13
js clipboard クリップボード コピー

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

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

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∞

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

Similar Posts

最近の投稿

アイキャッチ
ドメインオーソリティの使い道

ドメインオーソリティーとは一言で言えばドメインの価値を数値化したモノです。ドメインに関するものなので中身については全く意味をなさないと思います。ドメインオーソリティーの数値が低いから低品質なコン...

17 Jun 2017

アイキャッチ
個人情報を一切収集しない検索エンジンDuckDuckGoとは?

ネット検索と言えば、日本ならGoogleやYahoo Japan!(検索エンジンはGoogle)経由が多いですね。Bingは少数派といったところでしょうか。 DuckDuckGoという検索エン...

10 Jun 2017

アイキャッチ
ブートストラップバリデータ使い方 - Validator - for Bootstrap 3

今回はフォームバリデータのご紹介です。前回のPHPMailerと関連がありますが、フロントエンドでのバリデートができます。 CSSのフレームワークBootstrap3をお使いの方ならすんなりと...

03 Jun 2017

アイキャッチ
PHPMailerの使い方

今回はあらゆるところで使われているPHP用のメール送信ライブラリphpmailerの使い方を紹介します。 脆弱性がPHPMailer5.2.18より下のバージョンで発生するので新しいバージョン...

28 May 2017

アイキャッチ
画像加工・写真編集が簡単にできるアプリfotorのご紹介

今回は画像加工や編集ができるfotorのご紹介です。アプリの方が有名ですが、実はサイトからも使えるというのはご存じだったでしょうか?公式サイトはコチラ⇒[画像加工・写真編集|Fotor - 無料...

20 May 2017

著者

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

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

フッターイメージ