JavaScript
zeroclipboard

[JavaScript] zeroclipboard を使って js だけでクリップボードにコピーする方法

More than 3 years have passed since last update.

runstant でボタンによる short url のコピー機能を実現するにあたり,

色々調べたら zeroclipboard とかいうライブラリに行き着きました.

わりと使いやすいのに日本語で書かれた最新版の使い方がなかったので

備忘録がてらまとめてみました.

zeroclipboard.png


zeroclipboard とは?

ブラウザ上で js を使ってコピーを実現するためのライブラリです.

内部的には flash を使っているみたいです.

github


サンプル

最小サンプルです.

サンプル

クリックするとクリップボードにテキストがコピーされているのが

分かるかと思います.


コード


html

html は下記のような感じです.

zeroclipboard は cdnjs 経由でサクッと読み込んでいます.

ボタンを押した際にコピーしたいテキストをボタンの

data-clipboard-text 属性に入れておきます.

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />

<title>${title}</title>
<meta name="description" content="${description}" />

<style>${style}</style>

<script src="http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.5/ZeroClipboard.min.js"></script>
<script>${script}</script>
</head>
<body>
<a id="btn" data-clipboard-text="ボタンだよー♪" href='#'>Copy</a>
</body>
</html>


javascript

js はこれだけです.

ZeroClipboard にボタン要素を渡して生成するだけで

コピー機能が有効になります.

window.onload = function() {

//
var clip = new ZeroClipboard(document.getElementById("btn"));
clip.on("ready", function() {
// 準備完了
});
};

ボタンを右クリックすると flash のコンテキストメニューが出てくれば

うまくいっています!


イベント

ZeroClipboard にはいくつかイベントがあります.


  • ready ... 準備完了時に発火

  • beforecopy ... コピー前に発火

  • copy ... クリック時(beforecopy と aftercopy の間)に発火

  • aftercopy ... コピー後に発火

  • destroy ... 削除時に発火

  • error ... エラー時に発火

beforecopy のときに data-clipboard-text を変更すれば

動的にコピーするテキストの内容を変更できます.

サンプル


グチ

そもそも Pure JS でクリップボードにコピーできないってどういうことだよ!

早く HTML5 Clipboard API 実装してくれー!!