No Flashでクリップボードにコピーできるclipboard.jsのメモ #JavaScript

遊びで無駄にコピーできるものを作ったのでそのメモ。

clipboard.jsの使い方

使い方は公式サイトに載っていますが、
GithubにDEMOがあったので、それを見たほうが分かりやすかったです。
https://github.com/zenorocha/clipboard.js/tree/master/demo

npmでインストール

npm install clipboard --save-dev

インストールしてきたファイルにdistフォルダがあるので、そこから読み込み

<script src="dist/clipboard.min.js"></script>

記述

ライブラリを最初に使い方をみるのは、
DEMOの通りに書いてみるのが鉄則なので、DEMOの通りに
HTML→clipboard.min.js読み込み→script
の順で記述したらうまくいきました。以下完成形。

<body>
<input id="foo" type="text" value="hello">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

<script src="node_modules/clipboard/dist/clipboard.min.js"></script>
<script>
    var clipboard = new Clipboard('.btn');
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>
</body>

上記完成形を細かく分けると...

コピーしたいテキストのinputタグにID=fooを設定して、

<input id="foo" type="text" value="hello">

クリックするタグに
var clipboard = new Clipboard('.btn');
で設定したclass="btn"を設定

<button class="btn">Copy</button>

data-clipboard-action属性でcopyするかcutするかを選んで設定して、

data-clipboard-action="copy"
data-clipboard-action="cut"

data-clipboard-target属性でコピーしたいinputタグのid名fooを指定する。

data-clipboard-target="#foo"

Github Pageにこれを使ったものをアップしてみました。

Markdownコピペ（Qiita用）
http://sararilfy.github.io/qiita-markdown-copy-paste/

リンクをクリックすると、Qiitaのマークダウン記法がコピペできます。
遊びで作ったのでデザインがまだ。。。