Zeroclipboardは、コピーにフラッシュを使用するクロスブラウザーライブラリクラスであるため、ブラウザにフラッシュが装備されている限り実行できます。
Zeroclipboardのダウンロードアドレス://www.vevb.com/jiaoben/24961.html
Zeroclipboardは、複数のブラウザ(シングルコピーボタンと複数のコピーボタン)でペーストボードにコピーする機能を実装します。ユーザーエクスペリエンスを向上させるために、多くのWebサイトはコピーボタンをクリックしてコンテンツを貼り付けにコピーするだけです。
互換性の理由から、基本的にゼロリップボードを介して達成されます。まず、Zeroclipboardをダウンロードする必要があります。減圧後、zeroclipboard.js、zeroclipboard.swf、zeroclipboard10.swf( "Flash10")をプロジェクトに入れます。 SWFはZeroclipboard.setMoviePath( '/Zeroclipboard.swf')メソッドを介してロードできます。
以下は、ソートアウトされたコードです(オンライン検索でも整理されています)
(シングルコピーボタン):
HTML:
コードコピーは次のとおりです。
<入力型= "text" value = "text" id = "copy_txt"/> <a href = "javascirc :;" id = "copy_btn"> copy </a>
<スクリプト言語= "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){//コピーが完了した後にイベントを聞く
アラート( "aa")
clip.hide(); //一度コピーした後、HIDE()をHIDE()ボタンを無効にし、使用数の繰り返し計算を防止します
});
clip.addeventlistener( 'mousedown'、function(client){
clip.settext(document.getElementById( 'copy_txt')。値);
});
Clip.glue( 'copy_btn');
</script>
複数のコピーボタン:
コードコピーは次のとおりです。
<入力型= "text" value = "text" id = "copy_txt0"/> <a href = "javascirct :;" id = "copy_btn0" data = '0'> copy </a>
<入力型= "text" value = "text" id = "copy_txt1"/> <a href = "javascirct :;" id = "copy_btn1" data = '1'> copy </a>
<input type = "text" value = "text" id = "copy_txt2"/> <a href = "javascirct :;" id = "copy_btn2" data = '2'> copy </a>
<スクリプト言語= "javascript">
$( "。CopyBTN")。各(function(i){
var id = $(this).attr( 'data');
var Clip = null;
Clip = new Zeroclipboard.client();
zeroclipboard.setMoviePath( 'Zeroclipboard.swf'); // htmlと同じディレクトリにない場合は、setMoviePathを設定する必要があります
zeroclipboard.setMoviePath( 'Zeroclipboard10.swf');
clip.sethandcursor(true);
clip.settext($( "#copy_txt"+id).val());
clip.addeventlistener( 'complete'、function(client、text){
アラート(「コピーの成功を祝福します」);
});
Clip.glue( 'copy_btn'+id);
});
</script>
注:clip.settext($( "#copy_txt"+id).val()); divでコンテンツを取得する場合は、通常、clip.settext($( "#copy_txt"+id).text())を使用します。またはclip.settext($( "#copy_txt"+id).html());