Clipboard.js: Flash_html/css_WEB-ITnose を使用せずにクリップボード機能を実装する軽量の JavaScript ライブラリ

Zeno Rocha は、Web ページからローカル コンピューターのクリップボードにテキストをコピーするための専用の JavaScript ライブラリー Clipboard.js をリリースしました。

各 Github リポジトリ ページのサイドバーには、リポジトリの HTTPS クローン アドレスを表示するウィジェットがあります。このウィジェットの横にあるボタンをクリックすると、現在のリポジトリの URL がクリップボード内のユーザーの URL にコピーされます。 Github はこの機能を実装するために JavaScript ライブラリ ZeroClipboard を使用しています。問題は、このライブラリがカット アンド ペースト操作を完了するために目に見えない Flash を使用していることです。Flash テクノロジは主要なブラウザ メーカーによって無視されているため、新しい解決策が必要です。

今年の初め、Firefox はデフォルトで Flash を無効にし、ユーザーがテキストをクリップボードにコピーする前に Flash を明示的に有効にする必要がありました。

Mozilla Hacks に関する記事では、API document.execCommand() の使用方法を示しています。 MDN のドキュメントには、execCommand は「コマンドを実行することで編集可能な領域のコンテンツを操作できる機能をブラウザに提供します。」「cut」コマンドと「copy」コマンドが正式に有効になったのは、Firefox 41 がリリースされたときでした。

ブラウザでは、ユーザーがそのようなイベントをアクティブにトリガーすることのみが許可されており、JavaScript コードがテキストをクリップボードに自由にコピーすることは許可されません。コードがユーザーなしでテキストをコピーしようとすると、呼び出しは失敗します。

Rocha はいくつかのアイデアを借用しました。パラメータ命令を execCommand に渡すことで関連する操作を実行し、Selection API を統合しました。これらのテクノロジーを組み合わせることで、Clipboard.js は、便利な API と統合された多用途で軽量な JavaScript ライブラリを開発者に提供します。ボタンをライブラリにバインドしたい場合、開発者はクリップボードをトリガーする要素を宣言する必要があります:

var clipboard = new Clipboard('.btn');

主要なブラウザはこのライブラリをサポートしていますが、Safari はまだカット アンド コピー命令をサポートしていません。

ZeroClipboard の開発者は、ディスカッションの中で、同じ API のサポートをライブラリに追加して、これらの API がサポートされていない場合に下位互換性のある Flash 機能を提供すると主張しました。 ZeroClipboard の寄稿者である James Green 氏は、Clipboard.js について次のように述べています。「軽量な選択肢としては優れていますが、多くのユーザーが最新の主流ブラウザを使用していないことは承知しています。ZeroClipboard は Flash と下位互換性があります。また、新しい HTML5 機能のサポートも重要です」

HTML5 クリップボード API の提案はまだ検討中であり、ほとんどのブラウザでは部分的にのみサポートされています。

オールインワンプログラマー交換 QQ グループ 290551701。グループのプログラマーは全員、Baidu、Alibaba、JD.com、Xiaomi、Qunar、Are You Hungry、Linekong などの上級プログラマーであり、豊富な経験を持っています。ダイレクトコミュニケーションテクノロジーの達人、最高の学習環境である私たちに参加して、業界の生の情報を学びましょう。偉い人と友達になりたいなら、参加して偉い人たちにあなたを次のレベルに連れて行ってもらいましょう!