jQueryプラグインzClipを使用してテキストをクリップボードにコピーする

サイトを開発するとき、タスクは非常に標準的ではありませんでした-テキストフィールドをクリックしてコンテンツをコピーします。 検索では、クロスブラウザで時間を最小限に抑えて、フラッシュを使用するjQueryプラグインを使用して、JavaScriptを使用してクリップボードにコピーできることが示唆されました。 たぶんこれは正しい決定ではありませんが、それで解決しました。 zClipプラグインの使用経験、設定方法、発生した問題および解決した問題についてお話しします。



このプラグインに関する記事はすでにHabréにありました-FireFox 3.5およびIE8のクリップボードにコピーしますが、場所によっては古くなっています。 経験豊富な開発者はここで何か新しくて非常に興味深いものを見つけることはないでしょう。



したがって、 zClipプラグイン。 リンクを使用すると、使用例の表示、プラグイン自体のダウンロード、および英語の簡単な説明が表示されます。





プラグインをプラグインし、実装に進みます。 小さな障害がありました-すべての例はこのように実装されています-イベントハンドラがハングするボタンがあります-何かをコピーします。 割り当てに従って、テキストフィールドをクリックしてその内容をコピーする必要があります。 試してみましょう：

$(document).ready(function() { $("#copy-link1").zclip({ path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf", copy: function(){ return $(this).val(); }, afterCopy: function(){ $('#copy-text1').text(' '); } }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

時間 -IDによる入力にねじ込みます。

入力をクリックすると、テキストはバッファにコピーされますが、カーソルはフィールドに置かれず、フィールド内のテキスト全体を表示することはできません。 コンテンツがコピーされ、ユーザーにコピーについて通知されますが、どういうわけかそうではありません。



2-フィールドの内容をクリックし、入力をクリックしてプロセッサを非表示にすることで問題を解決しました-非表示にします。

 afterCopy: function(){ $('#copy-text2').text(' '); $("#copy-link2").zclip('hide'); $(this).select(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それはすでに優れており、バッファにコピーされていることはどういうわけか明らかです。



3-そして、ここではそのような横棒が出てきました-テキストフィールドはjQuery UIタブのあるページで使用されます。 また、ページが読み込まれたときにフィールドを持つタブが非表示になっていると、機能しません。

 $( "#tabs" ).tabs({ select: function (event, ui) { }, show: function(event, ui) { //      ,      if(ui.index == 2) { $("#copy-link4").zclip({ path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf", copy: function(){ return $(this).val(); }, afterCopy: function(){ $('#copy-text4').text(' '); $("#copy-link4").zclip('hide'); $(this).select(); } }); } } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この記事が誰かに役立つことを願っています。 コメントや提案を待っています。 ご清聴ありがとうございました。