search
LoginSignup
84

More than 5 years have passed since last update.

posted at

updated at

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

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 実装してくれー!!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
84