jQuery プラグイン Zclip は、あらゆるブラウザとの完全な互換性を実現し、クリックしてコンテンツを Clipboard_jquery にコピーします

Web 開発では、ユーザーがページ上のコード、URL アドレス、その他の情報をコピーするように求められます。これは、ユーザーがマウスをドラッグして右クリックしてコピーするときに発生する可能性のあるエラーを回避するために、直接配置することができます。ページ上のコピー ボタン このコピー ボタンをクリックするだけでコンテンツがコピーされ、ユーザーは貼り付けたい場所に貼り付けることができます。

HTML

まず、jquery ライブラリと zclip プラグインをページにロードする必要があります。これらの 2 つのファイルは、クリックしてダウンロードできます。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.zclip.min.js"></script> 

次に、ページの本文部分に次のコードを追加します。

<textarea id="mytext">请输入内容</textarea><br/> 
<a href="#" id="copy_input" class="copy">复制内容</a>

入力ボックスのテキストエリアはページ上に配置されます。もちろん、他の HTML 要素を使用することもできます。また、コピー ボタンもリンク テキストの形式で配置できます。

JavaScript

「コンテンツのコピー」をクリックすると、zclip プラグインが呼び出され、コピーが成功します。コードを参照してください。

$(function(){ 
  $('#copy_input').zclip({ 
    path: 'js/ZeroClipboard.swf', 
    copy: function(){//复制内容 
      return $('#mytext').val(); 
    }, 
    afterCopy: function(){//复制成功 
      $("<span id='msg'/>").insertAfter($('#copy_input')).text('复制成功'); 
    } 
  }); 
}); 

コピーされたコンテンツが入力ボックス入力、テキストエリアなどからのものである場合は、コピー オブジェクトを使用することに注意してください:

copy: function(){ 
  return $('#mytext').val(); 
} 

コピーされたコンテンツがページ要素 div、p などからのものである場合は、コピー オブジェクトを使用します:
コピー: $('#mytext').text(); これでコンテンツをクリップボードにコピーする機能は完了です。
パラメータの説明
path: swf 呼び出しパス、必須。js/ZeroClipboard.swf など。ZeroClipboard.swf ファイルはダウンロード パッケージにすでに存在します。
copy: コピーされたコンテンツは任意の文字列である必要があります。または、コールバック関数
によって返されたコンテンツでも構いません。 beforeCopy: コンテンツをコピーする前のコールバック関数、オプション
afterCopy: コンテンツのコピー後のコールバック関数、オプション

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。