clipboard.jsで、flashなしでクリップボードにコピーする

ブラウザからクリップボードにコピーって、結構やりたいことには上がってきますが、ブラウザからはセキュリティの問題でクリップボードにアクセスができないという制限が邪魔して簡単に実装ができないですよね？

実際これまで、flashを利用したzClip.jsなどを利用してきました。

しかし、昨今flashはもう利用するべきでないという流れの中あまり使いたくないですよね。

clipboard.js

clipboard.jsは、flashを利用することなくクリップボードにコピーできるプラグインです。

execCommandという新しいAPIによって実現ができるようになったようです。

safariがまだ対応していないようですが、その他の主要ブラウザは対応しているようなので使っていけそうです。

使い方①

<script type="text/javascript" src="js/clipboard.min.js"></script>
<script type="text/javascript">
    var clipboard = new Clipboard('.btn');
    clipboard.on('success', function(e) {
        //成功時の処理
    });
    clipboard.on('error', function(e) {
      //失敗時の処理
    });
</script>
<button type="button" class="btn" data-clipboard-text="この内容をコピーします">コピー</button>

非常に簡単ですね。

使い方②

<script type="text/javascript" src="js/clipboard.min.js"></script>
<script type="text/javascript">
    var clipboard = new Clipboard('.btn');
    clipboard.on('success', function(e) {
        //成功時の処理
    });
    clipboard.on('error', function(e) {
      //失敗時の処理
    });
</script>
<input type="text" id="target" />
<button type="button" class="btn" data-clipboard-target="#target">コピー</button>

うーん、楽ですね。

まとめ

safariがまだ対応していないことは難点ですが、かなり簡単に使える上、flashも使用していないので非常に良いと思います。