最近、私はスマート カスタマー サービスの Web ブラウザ アプリケーションに取り組んでいます。要件の 1 つは、システムから返された
回答を取得した後、顧客がその回答をシステム クリップボードにコピーすることです。これは小さなケースだと思っていましたが、さまざまな主流ブラウザと良好な互換性を保つのは簡単ではないことがわかりました。その理由は、セキュリティ上の理由から、最近のブラウザのほとんどはユニバーサル クリップボード コピー インターフェイスを提供していないためです (提供されている場合でも、デフォルトで無効になっています)。
オンラインで検索したところ、大まかに 2 つの既存の解決策があることがわかりました:
1: ネイティブ JavaScript で window.clipboardData を使用してクリップボードへのコピー機能を実装する
2: Zero Clipboard ライブラリを使用する
試してみたところ、既存のソリューションではニーズを満たすことができないことがわかりました。
オプション 1 は IE ブラウザのみをサポートしますが、Firefox および Chrome ブラウザでは機能しません。
オプション 2 は、ほとんどの既存の Web サイト (github などを含む) で採用されているソリューションです。ZeroClipboard は、海外の専門家によって開発されたクリップボード コピー用の
JS プラグインであり、クロスブラウザー コピー機能を実現します。 ZeroClipboard
を使用すると、ユーザー インターフェイスに影響を与えることなく、小さな Flash ビデオ (swf) が静かに非表示になります。
を使用してコピー関数を実装するだけです。
ZeroClipboardの「Zero」は「目に見えない、干渉ゼロ」を指します。
これに興味がある場合は、http://my.oschina.net/shniu/blog/298406?p=1
しかし、最新のブラウザでは、Flash は徐々に衰退しており、Firefox ブラウザは衰退しています。デフォルトではフラッシュがオンにならないため、Zero Clipboard は
互換性の点でもパフォーマンスが低くなります。
それでは、クリップボードへのコピーなどの単純な操作に対して、シンプルで互換性のあるソリューションはあるのでしょうか?いくつかの！それがgithubのオープンソースプロジェクトclipboard.jsです
(公式サイト: http://zenorocha.github.io/clipboard.js/) 公式サイトのclipboard.jsの紹介はとてもシンプルです:
A modern approach toテキストをクリップボードにコピーする Flash はありません。 gzip で 3kb だけ
テキストをクリップボードにコピーするのは難しくありません
けれども、何よりも重要なことは、 Flash や肥大化したフレームワークに依存すべきではありません。
だからこそ、clipboard.js が存在します。Flash や他のフレームワークに依存する必要があり、これがクリップボードが存在する理由です)
ダウンロード パス:
アプリケーション:
data-clipboard-target 属性は、コピーする必要がある HTML に対応します (Word で保存されている場合)。 txtには何もありません。
例は次のとおりです:
<!-- Target --> <input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> <!-- Trigger --> <button class="btn" data-clipboard-target="#foo"> <img src="assets/clippy.svg" alt="Copy to clipboard"> </button>
data-clipboard-action 属性は、コンテンツのコピーまたは切り取りを区別するために使用されます。
ええ
ご想像のとおり、切り取りアクションは または
