クリップボードにコピーするボタンを設置する。

github.com

内部的にFlashをつかっているのでスマートフォンでは動かないのですが、

1. ライブラリ（js）を読み込む
2. swfを読み込む
3. インスタンスをつくりイベントを張る

の3ステップで手軽につかえるので便利です。

DEMO

DEMOでは「コピーしましたよ。」というテキストをコピーしていますが、テキストボックスをつかえばここを動的に変更することも可能です。
（むしろそういった用途のほうが多いかもしれません）

JavaScript

(function(win, doc) {

    "use strict";
    
        var clip = new win.ZeroClipboard.Client(),
            text = "コピーしましたよ。";

        clip.setHandCursor(true);

        clip.addEventListener("load", function (client) {
            console.log("Flash movie loaded and ready.");
        });

        clip.addEventListener("mouseOver", function (client) {
            clip.setText(text);
        });

        clip.addEventListener("complete", function (client, text) {
            console.log("Copied text to clipboard: " + text);
        });

        clip.glue("d_clip_button", "d_clip_container");
    
})(this, document);

HTML

<div id="d_clip_container">
    <div id="d_clip_button" class="btn">COPY</div>
</div>

CSS

#d_clip_button {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  border-radius: 10%;
  width: 100px; height: 100px;
  color: #333;
  font: 20px AvenirNext-Heavy;
  line-height: 100px;
  text-align: center;
  background: #FF4081;
  transition: all .5s ease-in-out;
  box-shadow: 0 0 2px rgba(0, 0, 0, .2);
  cursor: pointer;
}

#d_clip_button.hover {
    border-radius: 50%;
}

ポイント

• swfのパスはライブラリ側（moviePathを変更）で指定する必要がある
• swfのサイズは#d_clip_buttonに合わせてくれる模様（idはmain.jsで指定）
• ただし#d_clip_buttonをdisplay: noneにしていると大きさが0になってしまう模様
• swfにマウスが乗った際に#d_clip_buttonには.hoverというクラスがつく