zeroclipboardの単一コピーボタンと複数コピーボタンの実装方法_javascriptスキル

Zeroclipboard は、コピーに Flash を使用するクロスブラウザ ライブラリ クラスであるため、ブラウザに Flash がインストールされている限り実行でき、IE の document.execCommand("Copy") よりも柔軟です。

zeroclipboard のダウンロード アドレス: http://www.jb51.net/jiaoben/24961.html

zeroclipboard は、マルチブラウザのペーストボードへのコピー機能 (単一のコピー ボタンと複数のコピー ボタン) を実装し、ユーザー エクスペリエンスを向上させるために、多くの Web サイトのテキスト ボックスのコンテンツはコピー ボタンをクリックするだけで済むようになりました。ペーストボードにコピーされます

互換性の理由から、基本的には zeroclipboard を通じて実装されます。まず、zeroclipboard をダウンロードし、解凍して、ZeroClipboard.js、ZeroClipboard.swf、および ZeroClipboard10.swf (「flash10 用」) をプロジェクトに配置します。ZeroClipboard を通じて swf をロードできます。 .setMoviePath( '/ZeroClipboard.swf' ) メソッド;
以下はコンパイルされたコードです (これもオンライン検索を通じてコン​​パイルされます)

(単一コピーボタン):

html:

コードをコピー コードは次のとおりです:

コピー
<スクリプト言語="JavaScript">
ZeroClipboard. setMoviePath( 'ZeroClipboard.swf' ); // html と同じディレクトリにない場合は setMoviePath
ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );
var Clip = new ZeroClipboard.Client( ); // 新しいゼロ クリップボード オブジェクトを作成します
Clip.setText( '' ); // クリップボードをクリアします
Clip.setHandCursor( true );マウスを移動したときのコピー ボックス
Clip.setCSSEffects( true ) // css を有効にする
Clip.addEventListener( 'complete', function(client, text) { // コピー完了後のイベントをリッスンする
alert("aa")
Clip.hide (); // 一度コピーすると、コピー ボタンが繰り返し計算されなくなります
}); ', function (client) { Clip.setText( document.getElementById('copy_txt').value );
} );
Clip.glue( 'copy_btn ' );

複数のコピーボタン:

コードをコピー コードは次のとおりです:

copy

コピー

注:clip.setText( $("#copy_txt" id).val() ); div 内のコンテンツを取得したい場合は、通常、clip.setText( $("#copy_txt" id).text を使用します。 () ) ;またはclip.setText( $("#copy_txt" id).html() );