Help us understand the problem. What is going on with this article?

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

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

phi
Game Programmer. phina.js 作ってます♪
http://phiary.me
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした