ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Web画面上に表示されている文字列をコピーするのは意外と面倒ですが、クリップボードの操作ができないために色々な工夫が考えられてきました。Flashを使ったものが多かったのですが、HTML5になってFlashは使われなくなってきています。

そこで代替として使ってみたいのがclipboard.jsです。Flashなしでクリップボードの操作ができるJavaScriptライブラリです。

clipboard.jsの使い方

clipboard.jsのデモです。テキストボックスの文字列をコピーします。

アイコンのクリックでコピーされました。

こちらはカットのデモ。

文字が消えてちゃんとカットされました。

こちらは表示されていない文字列をコピーします。data-clipboard-textでコピーする文字を指定しています。

clipboard.jsのタネは新しく出てきたexecCommandというAPIによります。これがコピーをサポートしています。Chrome 42以上/Firefox 41以上/IE9以上/Opera29以上とかなり新しいブラウザからのみサポートされており、Safariでは非サポートです。

clipboard.jsはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

clipboard.js — Copy to clipboard without Flash

zenorocha/clipboard.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2