JavaScriptでコピー機能を実装

ブラウザの互換性を無視して、コピー関数の各ブラウザのサポートを確認してください:

1. IE ブラウザには 3 つの解決策があり、コードは次のとおりです:

[javascript]

function copy(txtid) {

var txtObj = document.getElementById(txtid);

if(window.clipboardData){ // このオブジェクトは IE のみがサポートしており、Firefox と chrome はサポートしていません

// 1. ClipboardData オブジェクトを介してコピーします

// window.clipboardData.clearData();

B //txtObj.Select ();

//document.exec command 18); // IE のみがサポートし、Firefox は文法エラーを報告し、Chrome の実行結果は false を返します (サポートされていません) )

// 3、TextRange オブジェクトを通じてインスタント コピーを実現します。最初にコンテンツを選択する必要はありません

txtObj.createTextRange().execCommand("Copy");

function copy(txtid){

var txtObj = document .getElementById(txtid);

if(window.clipboardData){ // このオブジェクトは IE のみがサポートしており、Firefox と chrome はサポートしていません

//1。 object

//window.clipboardData.clearData() ;

//window.clipboardData.setData("Text",txtObj.value);

//2. ドキュメント オブジェクトをコピーします。最初に中国語を選択します。 text を入力し、コピー コマンドを実行します

//txtObj.select ();

//document.execCommand("Copy"); // IE でのみサポートされており、Firefox は構文エラーを報告し、Chrome の実行結果が返されます。 false (サポートされていません)

//3. TextRange オブジェクトを使用したリアルタイムのコピー: 最初にコンテンツを選択する必要はありません

txtObj.createTextRange().execCommand("Copy");

}

}

2. Firefox、インターフェイス メソッドを通じて実装されています。Firefox はセキュリティ上の理由から、17 以降のバージョンではこのインターフェイスが閉じられ、バージョン 17 以前で利用可能になります。コードは次のとおりです。

[javascript]

var Clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard); Components.classes ['@mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard); 3. Chrome は、セキュリティ上の理由により、ユーザーにクリップボード操作を提供しません。コピー機能のサポートがブラウザー間で均一ではないことがわかります。

Zero Clipboard Library

jhuckaby によって書かれた Zero Clipboard js ライブラリ。Flash を使用してコンテンツをクリップボードにコピーします。ブラウザに Flash プラグインが搭載されている限り、ActionScript を使用して JavaScript の欠点を防ぎ、ブラウザ間のコピーの互換性の問題を解決できます。

Zero Clipboard の実装原理: Zero Clipboard は最初に Flash オブジェクトのラベルを生成し、このようにして、透明な Flash をコピー ボタン上に浮かせることができます。 、必要なコンテンツが Flash に転送され、Flash 経由でシステム クリップボードにコピーされます。

Zero Clipboard の使用方法

注: Flash 実装に基づいているため、セキュリティ上の理由から、Flash は Web コンテナ (Apache、Tomcat など) で実行する必要があります。をロードすると、ボタンは一時停止アニメーションの現象に似ています。Flash の設定を右クリックすると、ZeroClipboard.swf が信頼できる場所に追加されるようですが、試してみました。まだ動作しません。ローカルブラウザにも問題がある可能性があります。

1> Zero Clipboard の圧縮パッケージをダウンロードし、解凍して、ZeroClipboard.js と ZeroClipboard.swf の 2 つのファイルをプロジェクトに配置します。次のコード: ;

注: ZeroClipboard.js と ZeroClipboard.swf は同じパスに配置する必要があります。同じパスにない場合は、ZeroClipboard.setMoviePath() を使用して設定できます。

3>次のようにコードをコピーします:

[javascript]

var Clip = new ZeroClipboard.Client() // 新しいクリップオブジェクトを作成します

clip.setHandCursor( true ); // 設定 マウスはハンドタイプです

clip.setText("hello,world"); use using using ' ' s's's' ‐ ‐ ‐ ‐ ‐ボタン、パラメーターはボタン要素の ID であり、ボタンをクリックしてコピーできます

var Clip = new ZeroClipboard.Client(); //新しいクリップオブジェクトを作成します

clip.setHandCursor(true); コピーされたテキストはテキストボックスの値になります

clip.glue("copy-botton") ; // クリップのボタンを登録します。パラメーターはボタン要素の ID です。ボタンをクリックしてコピーします

4>Zero Clipboard 一般的に使用される方法で、ソース コードを直接表示することをお勧めします:

reposition( ): ページサイズが変わったときにFlashボタンがずれないようにするため

Hide(): Flashボタンを非表示にする

show(): Flashボタンを表示する

setCSSEffects(): の問題を解決するFlash オクルージョン ボタン スタイルの失敗 (:hover を .hover に変更)。

5>ゼロ クリップボード共通イベント。イベント ハンドラー関数は addEventListener():

load: フラッシュ ボタン読み込みイベント

MouseOver: マウス移動上イベント

MouseOut: マウス移動下イベント

MouseDown :マウスプレスイベント

MouseUp: マウスリリースイベント

complete: コピー成功イベント

jquery.zclip ライブラリ

ZeroClipboard はネイティブ JavaScript に基づいているため、jquery.zclip は jQuery を使用して Zero Clip を実装しますカプセル化の場合、プロジェクトで jQuery がすでに使用されている場合は、それを使用することをお勧めします。jquery.zclip の方がサイズが小さくなります。