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

サイト内検索

最近の投稿

アイキャッチ
chromeのエクステンションを使わないでウェブページ全体をスクリーンショットでとる方法

さて今回はchromeブラウザ限定ですがエクステンションを使わずにページ全体と部分キャプチャをする方法をご紹介します。 割とエクステンションで処理しちゃう場合がありますがデフォルトで使えるとい...

05 Aug 2018

アイキャッチ
はじめてのVim覚え書き

今回はエディターのご紹介になります。かなり特殊なVimエディターをご紹介したいと思います。便利なエディターAtom、SublimeText、VisualStudioCodeとは訳が違います。 ...

28 Jul 2018

アイキャッチ
リニューアルした水木しげるロードは夜がおすすめ

さて、先日14日にリニューアルした境港の通称鬼太郎ロードに行って参りました。鬼太郎に会える町として新たに妖怪を追加して約800mの通りに177体の妖怪ブロンズ像がお出迎え、ゾーン分けをして再配置...

17 Jul 2018

アイキャッチ
flexboxで簡単レイアウト

Flexbox(Flexible Box Layout Module)とは今時のレスポンシブに対応したレイアウトスタイルです。上下中央の配置や等間隔の配置、固定幅と可変幅の配置など使い方は様々、...

07 Jul 2018

アイキャッチ
ダウンモニターアプリのご紹介

今回はウェブサイトの監視アプリのご紹介です。以下からダウンロードできます。 * [Free Website Monitor](https://play.google.com/store/app...

30 Jun 2018

著者

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

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

フッターイメージ