JQuery प्लगइन zClip का उपयोग करके क्लिपबोर्ड पर पाठ की प्रतिलिपि बनाएँ

साइट को विकसित करते समय, कार्य काफी मानक नहीं था - एक पाठ क्षेत्र पर क्लिक करके इसकी सामग्री को कॉपी करने के लिए। खोज ने सुझाव दिया कि क्रॉस-ब्राउज़र और समय के कम से कम नुकसान के साथ, जावास्क्रिप्ट का उपयोग करके क्लिपबोर्ड पर कॉपी करना फ्लैश का उपयोग करके jQuery प्लगइन्स का उपयोग करना संभव है। शायद यह सही फैसला नहीं है, लेकिन इस पर समझौता हो गया है। मैं zClip प्लगइन का उपयोग करने के अनुभव के बारे में बात करना चाहता हूं, इसे कैसे कॉन्फ़िगर करें, समस्याओं का सामना करना पड़ा और हल किया गया।

हैबे पर इस प्लगइन के बारे में पहले से ही एक लेख था - हम फायरफॉक्स 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(' '); } }); }); 

समय - आईडी द्वारा इनपुट के लिए खराब कर दिया।
इनपुट पर क्लिक करके, टेक्स्ट को बफर में कॉपी किया जाता है, लेकिन कर्सर को फ़ील्ड में नहीं रखा जाता है; फ़ील्ड में पूरा टेक्स्ट देखने की कोई संभावना नहीं है। सामग्री की प्रतिलिपि बनाई गई है, उपयोगकर्ता को प्रतिलिपि के बारे में सूचित किया जाता है, लेकिन किसी तरह ऐसा नहीं है।

दो - मैंने क्षेत्र की सामग्री पर क्लिक करके और इनपुट पर क्लिक करके प्रोसेसर को छिपाते हुए समस्या को हल किया - हम इसे छिपाते हैं।

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

यह पहले से बेहतर है, और यह किसी भी तरह स्पष्ट है कि यह बफर में कॉपी किया गया है।

तीन - और यहां इस तरह का एक जाम्ब निकला - पाठ क्षेत्र का उपयोग पेज पर 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(); } }); } } }); 

मुझे उम्मीद है कि लेख किसी के लिए उपयोगी होगा। टिप्पणियों और सुझावों की प्रतीक्षा है। आपका ध्यान देने के लिए धन्यवाद।