2012-03-11 21 views
21

हां, इस सवाल को बार-बार पूछा गया है: जावास्क्रिप्ट के साथ सिस्टम क्लिपबोर्ड से कॉपी और पेस्ट कैसे करें? मुझे अभी तक केवल आंशिक समाधान और हैक्स मिल गए हैं। अतीत में अक्सर पूछे जाने वाले कारण यह है कि अभी भी कोई कामकाजी समाधान नहीं है। हालांकि, मैंने देखा कि Google डॉक्स वास्तव में कीबोर्ड प्रोग्राम के साथ-साथ बटन दोनों के लिए एक समाधान समाधान है। तो, यह संभव है, लेकिन वे इसे कैसे करते हैं? सॉफ़्टवेयर सलाद आलेख, Accessing the System Clipboard with JavaScript – A Holy Grail?, समस्या का एक अच्छा अवलोकन देता है (लेकिन यह कुछ साल पुराना है)।जावास्क्रिप्ट कट/प्रतिलिपि/क्लिपबोर्ड पर पेस्ट: Google ने इसे कैसे हल किया?

संक्षेप में:

  • कीबोर्ड की घटनाओं ctrl

    आप उपयोग कर सकते हैं + x, CTRL + C, Ctrl + तैयार डेटा के साथ एक छिपे हुए पाठ क्षेत्र से या तो नकल पाठ, या एक छिपी हुई फ़ील्ड में चिपकाया पाठ को पकड़ने के लिए वी और फिर इसके साथ कुछ करें

  • आप फ्लैश के माध्यम से कुछ हैक का उपयोग कर सकते हैं या शायद जावा ऐप्पल को सिस्टम क्लिपबोर्ड पर कुछ उपयोगकर्ता की स्वीकृति के बिना कॉपी करने के लिए उपयोग कर सकते हैं।

  • आप IE के लिए क्लिपबोर्डडेटा.सेटडेटा के साथ "वास्तविक" समाधान का उपयोग कर सकते हैं और अन्य ब्राउज़रों के लिए execCommand, जो उपयोगकर्ता की स्वीकृति पर निर्भर करता है।

क्या कोई विचार है कि Google ने क्लिपबोर्ड समस्या का सामना कैसे किया है?

+0

आप किस ब्राउज़र का उपयोग कर रहे हैं? क्रोम के साथ, मेनू से कॉपी/पेस्ट का उपयोग करते समय मुझे कम से कम यह त्रुटि मिल रही है: http://imgur.com/8L5CR जो बदले में इंगित करेगा कि उन्होंने * समस्या का सामना नहीं किया है। – Niklas

+0

आप सही हैं, अब मुझे लगता है कि वे सिस्टम क्लिपबोर्ड (नियमित कुंजी घटनाओं को छोड़कर) का उपयोग नहीं करते हैं, लेकिन आपके खाते में एक वेब क्लिपबोर्ड बनाया है। –

उत्तर

9

[नोट: यह उत्तर सटीक था जब यह लिखा गया था, और सही ढंग से ओपी के प्रश्न का उत्तर दिया गया था। हालांकि, तब से प्रौद्योगिकी विकसित हुई है; यदि आप अपने वेब ऐप में कॉपी-एंड-पेस्ट का समर्थन करने में रुचि रखते हैं, तो कृपया इस पृष्ठ पर अन्य, अधिक हालिया उत्तरों देखें। — ruakh]


हालांकि, मैंने देखा कि गूगल डॉक्स वास्तव में दोनों कीबोर्ड की घटनाओं के साथ ही बटन के लिए अब एक काम कर समाधान है।

नहीं, ऐसा नहीं है। ज़रुरी नहीं। कीबोर्ड घटनाओं के लिए, Google डॉक्स कुछ भी नहीं करता है; यह बस ब्लॉक ब्राउज़र की डिफ़ॉल्ट प्रति-और-पेस्ट सुविधा नहीं है; इसलिए, उपयोगकर्ता Google डॉक्स के बिना रास्ते में कॉपी और पेस्ट कर सकते हैं। बटन के लिए, Google डॉक्स सिस्टम क्लिपबोर्ड का समर्थन नहीं करता है, लेकिन इसका अपना "वेब क्लिपबोर्ड" जो पूरी तरह से Google डॉक्स के भीतर है। आप अपने कंप्यूटर पर किसी अन्य प्रोग्राम में पेस्ट करने के लिए टेक्स्ट कॉपी करने के लिए टूलबार बटन का उपयोग नहीं कर सकते हैं, या अपने कंप्यूटर पर किसी अन्य प्रोग्राम से कॉपी किए गए टेक्स्ट पेस्ट करने के लिए नहीं कर सकते हैं।

इसके बारे में अधिक जानकारी के लिए, "Copying and pasting in Google Docs" देखें। (यह डेवलपर उन्मुख के बजाय उपयोगकर्ता उन्मुख है, लेकिन यह एक सभ्य नौकरी है जो स्पष्ट करता है कि क्या है और समर्थित नहीं है।)

+3

आह, अब मुझे यह मिल गया। Google ने "वेब क्लिपबोर्ड" बनाया है, जो आपको किसी भी ब्राउज़र विंडो से किसी भी ब्राउज़र विंडो में कॉपी/पेस्ट करने की अनुमति देता है। तो आप सिस्टम क्लिपबोर्ड का उपयोग नहीं करते हैं, लेकिन एक वेब क्लिपबोर्ड आपके खाते के साथ मिलकर। धन्यवाद। –

+0

@ जोसेदेजोंग: हाँ, बिल्कुल। :-) – ruakh

+0

इस उत्तर ने मुझे किसी भी व्यक्ति को एमएस एक्सेल से Google स्प्रेडशीट में कॉपी करने की कोशिश करने में मदद करने में मदद की है। धन्यवाद :-) – Stewart

3

Google एक बहुत ही सरल लेकिन शांत विधि का उपयोग करता है। फायरबग का उपयोग करके आपको पता चलेगा कि लोड किए गए एचटीएमएल कोड में आकार 1 की शुरुआत में एक टेक्स्ट एरिया है। Google डॉक क्या करता है कि जब उपयोगकर्ता टेक्स्ट का चयन करता है और ctrl + c दबाता है, तो यह ईवेंट को कैप्चर करता है और कुछ तकनीक से दस्तावेज़ जो दस्तावेज़ कंटेनर में चुना गया है और उस सामग्री में टेक्स्ट क्षेत्र का मान सेट करता है। यह ध्यान केंद्रित करता है और पाठ क्षेत्र का चयन करता है। अब यह ctrl + c घटना जारी करता है।लेकिन अब टेक्स्ट को टेक्स्ट एरिया में चुना गया है, जब ईवेंट को फिर से चलाया जाता है, ब्राउज़र टेक्स्ट टेक्स्ट में टेक्स्ट कॉपी करता है और इस प्रकार हमें कॉपी किया गया टेक्स्ट

24

मुझे पता है कि प्रश्न बहुत पहले पोस्ट किया गया था, लेकिन मुझे यह जांचने की आवश्यकता है कि Google ऐसा करता है, तो शायद किसी को यह उपयोगी लगेगा।

वास्तव में Google सिस्टम क्लिपबोर्ड का भी उपयोग करता है लेकिन यह थोड़ा मुश्किल है। यदि आप कीबोर्ड शॉर्टकट का उपयोग करते हैं तो आप कॉपी/पेस्ट/कट इवेंट को पकड़ सकते हैं उदा। खिड़की:

window.addEventListener('copy', function (ev) { 
    console.log('copy event'); 
    // you can set clipboard data here, e.g. 
    ev.clipboardData.setData('text/plain', 'some text pushed to clipboard'); 
    // you need to prevent default behaviour here, otherwise browser will overwrite your content with currently selected 
    ev.preventDefault(); 
}); 

कीबोर्ड शॉर्टकट के लिए लाइव उदाहरण: http://jsfiddle.net/tyk9U/

दुर्भाग्य से इस कीबोर्ड शॉर्टकट के लिए एकमात्र समाधान है और वहाँ संदर्भ मेनू के साथ एक समस्या है, क्योंकि आप देशी बिना क्लिपबोर्ड डेटा का उपयोग नहीं कर सकते हैं (भरोसा) प्रतिलिपि/कट/पेस्ट घटना। लेकिन गूगल दिलचस्प चाल करता है। एपीआई document.execCommand() है जो आपको संतुष्ट तत्व के लिए कमांड चलाने की अनुमति देता है और 'copy' कमांड होता है जिसे आप इसे document.execCommand('copy') के माध्यम से ट्रिगर कर सकते हैं। लेकिन जब आप इसे क्रोम में कंसोल में आज़माते हैं तो यह false लौटाएगा। मैंने जांच करने में थोडा समय बिताया और यह पता चला कि उनके पास क्रोम एक्सटेंशन इंस्टॉल है, जिसे "Google ड्राइव" कहा जाता है (क्रोम: // ऐप्स पर जाएं/और आप इसे वहां देख सकते हैं) जो डोमेन ड्राइव्स के लिए क्लिपबोर्ड एक्सेस को सक्षम बनाता है। कॉम और docs.google.com। कुछ दस्तावेज़ या स्प्रेडशीट खोलें और कंसोल document.execCommand('copy') में टाइप करें - यह true लौटाएगा। जब आप एक्सटेंशन को अनइंस्टॉल करते हैं तो आप संदर्भ मेनू से क्लिपबोर्ड संचालन का उपयोग नहीं कर पाएंगे।

आप (यहाँ https://developer.chrome.com/apps/first_app विवरण) बहुत ही सरल मैनिफ़ेस्ट फ़ाइल के साथ खुद के लिए इस तरह के आवेदन बना सकते हैं:

{ 
    "manifest_version": 2, 
    "name": "App name", 
    "description": "App description", 
    "version": "1.0", 
    "app": { 
     "urls": [ 
      "http://your.app.url.here/" 
     ], 
     "launch": { 
      "web_url": "http://your.app.url.here/" 
     } 
    }, 
    "icons": { 
     "128": "x-128.png" 
    }, 
    "permissions": [ 
     "clipboardRead", 
     "clipboardWrite" 
    ] 
} 

"अनुमति" क्षेत्र यहाँ क्लिपबोर्ड संचालन सक्षम बनाता है।

अब जब आप सक्षम हैं तो आप document.execCommand('copy') कर सकते हैं और यह काम करेगा (true वापस करेगा)। लेकिन यह सबकुछ नहीं है - document.execCommand('copy') क्रोम ट्रिगर्स कॉपी इवेंट में और आप इसे उसी कोड से पकड़ सकते हैं जिसका उपयोग कीबोर्ड क्लिपबोर्ड शॉर्टकट को पकड़ने के लिए किया जाता है। यह अब Google करता है।

बेशक यह विवरण केवल क्रोम के लिए मान्य है।

+0

मैं इस जवाब का परीक्षण करने की कोशिश कर रहा था और महसूस किया कि मैं क्रोम एक्सटेंशन को अक्षम करके बस पुन: पेश नहीं कर सका । मुझे इसे पूरी तरह से अनइंस्टॉल करना पड़ा। एक और बिंदु के रूप में। आप document.execCommand ('copy') को वैध उपयोगकर्ता क्लिक ईवेंट के जवाब में लंबे समय तक चला सकते हैं। मैं यह पता लगाने में सक्षम नहीं हूं कि क्या आप स्वयं उस घटना को जाल कर सकते हैं। क्या आपको पता है कि क्या आपके पास clip.execCommand ('copy') द्वारा ट्रिगर किए गए क्लिपबोर्डर्डवेंट को कैप्चर करने के लिए एक्सटेंशन होना है? इस कल्पना ने मुझे विश्वास दिलाया कि execCommand कार्यान्वयन ने किसी घटना को नहीं रोका। –

+0

@ जेसनटी। जो हाल ही में बदल गया है - यहां एक नज़र डालें https://developers.google.com/web/updates/2015/04/cut-and-copy-commands –

4

अन्य लोगों ने इस धागे में पहले से ही पोस्ट किए जाने के अलावा, मैंने एक पूरी तरह से काम करने वाला उदाहरण बनाया है जो कुंजीपटल शॉर्टकट दृष्टिकोण (मैक ओएस एक्स पर सीटीआरएल + सी या सीएमडी + सी) के साथ-साथ कस्टम बटन दृष्टिकोण जो ट्रिगर करता है प्रतिलिपि कार्रवाई।

पूर्ण डेमो यहां पाया जा सकता: http://jsfiddle.net/rve7d/

मैं मातुज़ डब्ल्यू जवाब बहुत उपयोगी पाया इस डेमो बनाने के प्रयास में है, लेकिन वह जो थोड़ा अलग बर्ताव करता है और के रूप में विभिन्न डेटा प्रकार का उपयोग करता है IE के लिए विचार समर्थन में रखा नहीं किया गया है पहला पैरामीटर

if(window.clipboardData) { 
    // use just 'Text' or 'Url' as a first param otherwise strange exception is thrown 
    window.clipboardData.setData('Text', 'Text that will be copied to CB');   
} else if(ev.originalEvent.clipboardData) { 
    ev.originalEvent.clipboardData.setData('text/plain', 'Text that will be copied to CB');  
} else { 
    alert('Clipboard Data are not supported in this browser. Sorry.'); 
} 

पुनश्च: मैं विश्लेषण किया Google स्प्रैडशीट के स्रोत कोड तो मेरे समाधान ज्यादातर उनके समाधान के अनुरूप हमारे कस्टम स्प्रेडशीट देखें घटक के लिए और रास्ते पर इस कार्यक्षमता की जरूरत है।

0
<p>COPY : </p> 
<p>Email me at <a class="js-emaillink" href="mailto:[email protected]">[email protected]</a></p> 
<p><button class="js-emailcopybtn" value="clipboard" >clipboard</button></p> 
<textarea rows="10" cols = "12"></textarea> 
<p>CUT: </p> 
<p><textarea class="js-cuttextarea">Hello I'm some text</textarea></p> 
<p><button class="js-textareacutbtn" disable>Cut Textarea</button></p> 
<script> 
//copy clipboard 
var copyEmailBtn = document.querySelector('.js-emailcopybtn'); 
copyEmailBtn.addEventListener('click', function(event) { 
    // Выборка ссылки с электронной почтой 
    var emailLink = document.querySelector('.js-emaillink'); 
    var range = document.createRange(); 
    range.selectNode(emailLink); 
    window.getSelection().addRange(range); 
    try { 
    // Теперь, когда мы выбрали текст ссылки, выполним команду копирования 
    var successful = document.execCommand('copy'); 
    var msg = successful ? 'successful' : 'unsuccessful'; 
    console.log('Copy email command was ' + msg); 
    } catch(err) { 
    console.log('Oops, unable to copy'); 
    } 
    // Снятие выделения - ВНИМАНИЕ: вы должны использовать 
    // removeRange(range) когда это возможно 
    window.getSelection().removeAllRanges(); 
}); 
//cut 
var cutTextareaBtn = document.querySelector('.js-textareacutbtn'); 
cutTextareaBtn.addEventListener('click', function(event) { 
    var cutTextarea = document.querySelector('.js-cuttextarea'); 
    cutTextarea.select(); 
    try { 
    var successful = document.execCommand('cut'); 
    var msg = successful ? 'successful' : 'unsuccessful'; 
    console.log('Cutting text command was ' + msg); 
    } catch(err) { 
    console.log('Oops, unable to cut'); 
    } 
}); 
</script>