javascript - मैं जावास्क्रिप्ट में क्लिपबोर्ड पर कैसे कॉपी करूं?




clipboard copy-paste (20)

अवलोकन

क्लिपबोर्ड पर कॉपी करने के लिए 3 प्राथमिक ब्राउज़र एपीआई हैं:

  1. Async क्लिपबोर्ड एपीआई [navigator.clipboard.writeText]
    • क्रोम 66 में उपलब्ध टेक्स्ट-केंद्रित भाग (मार्च 2018)
    • एक्सेस एसिंक्रोनस है और जावास्क्रिप्ट वादे का उपयोग करता है, इसलिए लिखा जा सकता है ताकि सुरक्षा उपयोगकर्ता संकेत (यदि प्रदर्शित हो) पृष्ठ में जावास्क्रिप्ट को बाधित न करें।
    • टेक्स्ट को सीधे एक चर से क्लिपबोर्ड पर कॉपी किया जा सकता है।
    • केवल HTTPS पर प्रदर्शित पृष्ठों पर समर्थित है।
    • क्रोम में 66 टैब सक्रिय टैब में अनुमतियों के बिना क्लिपबोर्ड पर लिख सकते हैं।
  2. document.execCommand('copy')
    • अधिकांश ब्राउज़र इसे अप्रैल 2015 के रूप में समर्थन करते हैं (नीचे ब्राउज़र समर्थन देखें)।
    • एक्सेस तुल्यकालिक है, यानी पृष्ठ तक जावास्क्रिप्ट को तब तक बंद कर देता है जब तक कि किसी भी सुरक्षा संकेतों के साथ प्रदर्शन और उपयोगकर्ता इंटरैक्टिंग शामिल न हो।
    • पाठ डीओएम से पढ़ा जाता है और क्लिपबोर्ड पर रखा जाता है।
    • परीक्षण के दौरान ~ अप्रैल 2015 केवल इंटरनेट एक्सप्लोरर को क्लिपबोर्ड पर लिखते समय अनुमतियों को प्रदर्शित करने के रूप में नोट किया गया था।
  3. प्रतिलिपि घटना को ओवरराइड करना
    • कॉपी ईवेंट ओवरराइड करने पर क्लिपबोर्ड एपीआई दस्तावेज देखें।
    • किसी भी प्रतिलिपि ईवेंट से क्लिपबोर्ड पर जो दिखाई देता है उसे संशोधित करने की अनुमति देता है, इसमें सादा पाठ के अलावा अन्य डेटा के अन्य प्रारूप शामिल हो सकते हैं।
    • यहां शामिल नहीं है क्योंकि यह सीधे सवाल का जवाब नहीं देता है।

सामान्य विकास नोट्स

जब आप कंसोल में कोड का परीक्षण करते हैं तो क्लिपबोर्ड से संबंधित कमांड काम करने की अपेक्षा न करें। आम तौर पर पृष्ठ को सक्रिय होने की आवश्यकता होती है (Async क्लिपबोर्ड एपीआई) या क्लिपबोर्ड तक पहुंचने के लिए ( document.execCommand('copy') ) को अनुमति देने के लिए उपयोगकर्ता इंटरैक्शन (जैसे उपयोगकर्ता क्लिक) की आवश्यकता होती है, अधिक जानकारी के लिए नीचे देखें।

Async + Fallback

नए Async क्लिपबोर्ड एपीआई के लिए ब्राउज़र समर्थन के स्तर के कारण आप शायद ब्राउज़र ब्राउज़र कवरेज प्राप्त करने के लिए document.execCommand('copy') विधि पर फ़ॉलबैक करना चाहते हैं।

ये रहा एक सरल उदाहरण:

function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
  
  </textarea>
</div>

ध्यान दें कि यह स्निपेट StackOverflow के एम्बेडेड पूर्वावलोकन में अच्छी तरह से काम नहीं कर रहा है, आप इसे यहां आजमा सकते हैं: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors=1011

Async क्लिपबोर्ड एपीआई

ध्यान दें कि "अनुमति का अनुरोध" करने और Chrome 66 में अनुमति API के माध्यम से क्लिपबोर्ड तक पहुंच के लिए परीक्षण करने की क्षमता है।

var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
  console.log('Async: Copying to clipboard was successful!');
}, function(err) {
  console.error('Async: Could not copy text: ', err);
});

document.execCommand ( 'प्रतिलिपि')

इस पोस्ट का बाकी document.execCommand('copy') API की बारीकियों और विवरण में जाता है।

ब्राउज़र समर्थन

जावास्क्रिप्ट document.execCommand('copy') .execCommand document.execCommand('copy') समर्थन बढ़ गया है, ब्राउज़र अपडेट के लिए नीचे दिए गए लिंक देखें:

सरल उदाहरण

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.focus();
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});
<p>
  <button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
  <textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>

जटिल उदाहरण: इनपुट प्रदर्शित किए बिना क्लिपबोर्ड पर कॉपी करें

उपरोक्त सरल उदाहरण स्क्रीन पर दिखाई देने वाले textarea या input तत्व होने पर बहुत अच्छा काम करता है।

कुछ मामलों में आप input / textarea तत्व प्रदर्शित किए बिना टेक्स्टबोर्ड पर टेक्स्ट कॉपी करना चाहेंगे। यह इस के आसपास काम करने के तरीके का एक उदाहरण है (मूल रूप से तत्व डालें, क्लिपबोर्ड पर कॉपी करें, तत्व हटाएं):

Google क्रोम 44, फ़ायरफ़ॉक्स 42.0 ए 1 और आईई 11.0.8600.17814 के साथ परीक्षण किया गया।

function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");

  //
  // *** This styling is an extra step which is likely not required. ***
  //
  // Why is it here? To ensure:
  // 1. the element is able to have focus and selection.
  // 2. if element was to flash render it has minimal visual impact.
  // 3. less flakyness with selection and copying which **might** occur if
  //    the textarea element is not visible.
  //
  // The likelihood is the element won't even render, not even a flash,
  // so some of these are just precautions. However in IE the element
  // is visible whilst the popup box asking the user for permission for
  // the web page to copy to the clipboard.
  //

  // Place in top-left corner of screen regardless of scroll position.
  textArea.style.position = 'fixed';
  textArea.style.top = 0;
  textArea.style.left = 0;

  // Ensure it has a small width and height. Setting to 1px / 1em
  // doesn't work as this gives a negative w/h on some browsers.
  textArea.style.width = '2em';
  textArea.style.height = '2em';

  // We don't need padding, reducing the size if it does flash render.
  textArea.style.padding = 0;

  // Clean up any borders.
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';

  // Avoid flash of white box if rendered for any reason.
  textArea.style.background = 'transparent';


  textArea.value = text;

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

  document.body.removeChild(textArea);
}


var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
  
  </textarea>
</div>

अतिरिक्त नोट्स

केवल उपयोगकर्ता काम करता है अगर उपयोगकर्ता कार्रवाई करता है

सभी document.execCommand('copy') कॉल उपयोगकर्ता क्रिया के प्रत्यक्ष परिणाम के रूप में होनी चाहिए, उदाहरण के लिए ईवेंट हैंडलर पर क्लिक करें। यह उपयोगकर्ताओं के क्लिपबोर्ड के साथ गड़बड़ को रोकने के लिए एक उपाय है जब वे इसकी अपेक्षा नहीं करते हैं।

अधिक जानकारी के लिए यहां Google डेवलपर पोस्ट देखें।

क्लिपबोर्ड एपीआई

ध्यान दें कि पूर्ण क्लिपबोर्ड एपीआई ड्राफ्ट विनिर्देश यहां पाया जा सकता है: https://w3c.github.io/clipboard-apis/

क्या यह समर्थित है?

  • document.queryCommandSupported('copy') समर्थित document.queryCommandSupported('copy') कमांड वापस आना चाहिए यदि आदेश "ब्राउज़र द्वारा समर्थित है"।
  • और document.queryCommandEnabled('copy') true अगर document.execCommand('copy') सफल होने पर सफल होगा। उपयोगकर्ता द्वारा शुरू किए गए थ्रेड और अन्य आवश्यकताओं से कमांड को कॉल करने के लिए यह सुनिश्चित करने के लिए जांच कर रहे हैं।

हालांकि ब्राउज़र संगतता के मुद्दों के उदाहरण के रूप में, ~ अप्रैल से ~ अक्टूबर 2015 तक Google क्रोम केवल document.queryCommandSupported('copy') से true है document.queryCommandSupported('copy') यदि आदेश उपयोगकर्ता द्वारा शुरू किए गए थ्रेड से कॉल किया गया था।

नीचे संगतता विवरण नोट करें।

ब्राउज़र संगतता विस्तार

जबकि उपयोगकर्ता क्लिक के परिणामस्वरूप कॉल / catch ब्लॉक में लपेटा गया document.execCommand('copy') एक साधारण कॉल आपको निम्न संगतता का उपयोग करने के लिए सबसे अधिक अनुकूलता का उपयोग करेगा:

Document.execCommand पर कोई भी कॉल, document.queryCommandSupported या document.queryCommandEnabled को किसी try / catch ब्लॉक में लपेटा जाना चाहिए।

false वापसी के बजाय बुलाए जाने पर अलग-अलग ब्राउज़र कार्यान्वयन और ब्राउज़र संस्करण अलग-अलग प्रकार के अपवाद फेंक देते हैं।

विभिन्न ब्राउज़र कार्यान्वयन अभी भी प्रवाह में हैं और https://w3c.github.io/clipboard-apis/ अभी भी ड्राफ्ट में है, इसलिए अपना परीक्षण करना याद रखें।

क्लिपबोर्ड पर पाठ कॉपी करने का सबसे अच्छा तरीका क्या है? (बहु ब्राउज़र)

मैंने कोशिश की है:

function copyToClipboard(text) {
    if (window.clipboardData) { // Internet Explorer
        window.clipboardData.setData("Text", text);
    } else {  
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);  
        clipboardHelper.copyString(text);
    }
}

लेकिन इंटरनेट एक्सप्लोरर में यह एक वाक्यविन्यास त्रुटि देता है। फ़ायरफ़ॉक्स में, यह कहता है कि unsafeWindow is not defined

फ्लैश के बिना एक अच्छी चाल: ट्रेलो उपयोगकर्ता के क्लिपबोर्ड तक कैसे पहुंचता है?


ZeroClipboard सबसे अच्छा क्रॉस-ब्राउज़र समाधान है जो मैंने पाया है:

<div id="copy" data-clipboard-text="Copy Me!">Click to copy</div>    
<script src="ZeroClipboard.js"></script>
<script>
  var clip = new ZeroClipboard( document.getElementById('copy') );
</script>

यदि आपको आईओएस के लिए गैर-फ्लैश समर्थन की आवश्यकता है तो आप केवल फॉल-बैक जोड़ें:

clip.on( 'noflash', function ( client, args ) {
    $("#copy").click(function(){            
        var txt = $(this).attr('data-clipboard-text');
        prompt ("Copy link, then click OK.", txt);
    });
});  

http://zeroclipboard.org/

https://github.com/zeroclipboard/ZeroClipboard


क्लिपबोर्ड पर स्वचालित प्रतिलिपि खतरनाक हो सकती है, इसलिए अधिकांश ब्राउज़र (आईई को छोड़कर) इसे बहुत मुश्किल बनाते हैं। व्यक्तिगत रूप से, मैं निम्नलिखित सरल चाल का उपयोग करता हूं:

function copyToClipboard(text) {
  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}

उपयोगकर्ता को प्रॉम्प्ट बॉक्स के साथ प्रस्तुत किया जाता है, जहां कॉपी करने के लिए पाठ पहले से ही चुना जाता है। अब Ctrl + C दबाएं और एंटर (बॉक्स को बंद करने के लिए) दबाएं - और वॉयला!

अब क्लिपबोर्ड कॉपी ऑपरेशन सुरक्षित है, क्योंकि उपयोगकर्ता इसे मैन्युअल रूप से करता है (लेकिन एक बहुत सीधी तरीके से)। बेशक, सभी ब्राउज़रों में काम करता है।

<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>

<script>
  function copyToClipboard(text) {
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
  }
</script>


निम्न दृष्टिकोण क्रोम, फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर और एज में काम करता है, और सफारी के हाल के संस्करणों में (कॉपी समर्थन संस्करण 10 में जोड़ा गया था जिसे अक्टूबर 2016 को जारी किया गया था)।

  • एक टेक्स्टरेरा बनाएं और अपनी सामग्री को उस क्लिप पर सेट करें जिसे आप क्लिपबोर्ड पर कॉपी करना चाहते हैं।
  • डीओएम में textarea संलग्न करें।
  • Textarea में पाठ का चयन करें।
  • कॉल document.execCommand ("कॉपी")
  • डोम से textarea निकालें।

नोट: आपको टेक्स्टरेरा नहीं दिखाई देगा, क्योंकि इसे जावास्क्रिप्ट कोड के समान सिंक्रोनस आमंत्रण के भीतर जोड़ा और हटा दिया गया है।

अगर आप इसे स्वयं लागू कर रहे हैं तो कुछ चीजें देखने के लिए:

  • सुरक्षा कारणों से, इसे केवल इवेंट हैंडलर से क्लिक किया जा सकता है जैसे कि क्लिक (बस विंडोज़ खोलने के साथ)।
  • पहली बार क्लिपबोर्ड अपडेट होने पर आईई एक अनुमति संवाद दिखाएगा।
  • आईई, और एज स्क्रॉल करेंगे जब textarea केंद्रित है।
  • execCommand () कुछ मामलों में फेंक सकता है।
  • जब तक आप टेक्स्टरेरा का उपयोग नहीं करते हैं तब तक न्यूलाइन और टैब निगल सकते हैं। (अधिकांश लेख एक div का उपयोग करने की सिफारिश करते हैं)
  • आईई संवाद दिखाए जाने पर टेक्स्टरेरा दिखाई देगी, आपको या तो इसे छिपाने की ज़रूरत है, या आईई विशिष्ट क्लिपबोर्डडेटा एपीआई का उपयोग करें।
  • आईई सिस्टम प्रशासक क्लिपबोर्ड एपीआई को अक्षम कर सकते हैं।

नीचे दिए गए कार्य को निम्नलिखित सभी मुद्दों को यथासंभव स्वच्छता से संभालना चाहिए। अगर आपको कोई समस्या आती है या इसे सुधारने के लिए कोई सुझाव है तो कृपया एक टिप्पणी छोड़ दें।

// Copies a string to the clipboard. Must be called from within an 
// event handler such as click. May return false if it failed, but
// this is not always possible. Browser support for Chrome 43+, 
// Firefox 42+, Safari 10+, Edge and IE 10+.
// IE: The clipboard feature may be disabled by an administrator. By
// default a prompt is shown the first time the clipboard is 
// used (per session).
function copyToClipboard(text) {
    if (window.clipboardData && window.clipboardData.setData) {
        // IE specific code path to prevent textarea being shown while dialog is visible.
        return clipboardData.setData("Text", text); 

    } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
            return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        } catch (ex) {
            console.warn("Copy to clipboard failed.", ex);
            return false;
        } finally {
            document.body.removeChild(textarea);
        }
    }
}

https://jsfiddle.net/fx6a6n6x/


मैंने हाल ही में इस समस्या पर एक तकनीकी ब्लॉग पोस्ट लिखा है (मैं लुसीडचार्ट में काम करता हूं और हमने हाल ही में हमारे क्लिपबोर्ड पर ओवरहाल किया है)।

क्लिपबोर्ड पर सादा पाठ की प्रतिलिपि अपेक्षाकृत सरल है, मान लीजिए कि आप इसे सिस्टम कॉपी ईवेंट के दौरान करना चाहते हैं (उपयोगकर्ता Ctrl C दबाता है या ब्राउज़र के मेनू का उपयोग करता है)।

var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") != -1 
           || navigator.userAgent.toLowerCase().indexOf("trident") != -1);

document.addEventListener('copy', function(e) {
    var textToPutOnClipboard = "This is some text";
    if (isIe) {
        window.clipboardData.setData('Text', textToPutOnClipboard);    
    } else {
        e.clipboardData.setData('text/plain', textToPutOnClipboard);
    }
    e.preventDefault();
});

क्लिप कॉपी पर टेक्स्ट डालना सिस्टम कॉपी इवेंट के दौरान नहीं है और अधिक कठिन है। ऐसा लगता है कि फ्लैश के माध्यम से ऐसा करने के लिए इन अन्य उत्तरों के संदर्भ तरीकों में से कुछ ऐसा लगता है, जो इसे करने का एकमात्र क्रॉस-ब्राउज़र तरीका है (जहां तक ​​मैं समझता हूं)।

इसके अलावा, ब्राउज़र-दर-ब्राउज़र आधार पर कुछ विकल्प हैं।

यह आईई में सबसे आसान है, जहां आप किसी भी समय जावास्क्रिप्ट से क्लिपबोर्ड डेटा ऑब्जेक्ट तक पहुंच सकते हैं:

window.clipboardData

(जब आप सिस्टम को कट, प्रतिलिपि या इवेंट पेस्ट के बाहर करने का प्रयास करते हैं, तो आईई उपयोगकर्ता को वेब एप्लिकेशन क्लिपबोर्ड अनुमति देने के लिए संकेत देगा।)

क्रोम में, आप एक क्रोम एक्सटेंशन बना सकते हैं जो आपको क्लिपबोर्ड अनुमतियां देगा (यह हम लुसीडचार्ट के लिए करते हैं)। फिर आपके एक्सटेंशन वाले उपयोगकर्ताओं के लिए आपको सिस्टम सिस्टम को स्वयं आग लगाना होगा:

document.execCommand('copy');

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


यदि आप वास्तव में एक सरल समाधान चाहते हैं (एकीकृत करने के लिए 5 मिनट से भी कम समय लेता है) और बॉक्स के ठीक बाहर दिखता है, तो क्लिप्पी कुछ जटिल समाधानों का एक अच्छा विकल्प है।

Clippy

यह गिथूब के एक सह-संस्थापक द्वारा लिखा गया था। उदाहरण फ्लैश एम्बेड कोड नीचे:

<object 
   classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
   width="110"
   height="14"
   id="clippy">
  <param name="movie" value="/flash/clippy.swf"/>
  <param name="allowScriptAccess" value="always"/>
  <param name="quality" value="high"/>
  <param name="scale" value="noscale"/>
  <param NAME="FlashVars" value="text=#{text}"/>
  <param name="bgcolor" value="#{bgcolor}"/>
  <embed 
     src="/flash/clippy.swf"
     width="110"
     height="14"
     name="clippy"
     quality="high"
     allowScriptAccess="always"
     type="application/x-shockwave-flash"
     pluginspage="http://www.macromedia.com/go/getflashplayer"
     FlashVars="text=#{text}"
     bgcolor="#{bgcolor}"/>
</object>

उस पाठ के साथ #{text} को प्रतिस्थापित करने के लिए याद रखें, और रंग के साथ #{bgcolor}


वेबपृष्ठ से क्लिपबोर्ड को पढ़ना और संशोधित करना सुरक्षा और गोपनीयता चिंताओं को बढ़ाता है। हालांकि, इंटरनेट एक्सप्लोरर में, यह करना संभव है। मुझे यह उदाहरण स्निपेट मिला:

    <script type="text/javascript">
        function select_all(obj) {
            var text_val=eval(obj);
            text_val.focus();
            text_val.select();
            r = text_val.createTextRange();
            if (!r.execCommand) return; // feature detection
            r.execCommand('copy');
        }
    </script>
    <input value="http://www.sajithmr.com"
     onclick="select_all(this)" name="url" type="text" />


clipboard.js एक छोटी, गैर-फ्लैश, उपयोगिता है जो क्लिपबोर्ड पर टेक्स्ट या एचटीएमएल डेटा की प्रतिलिपि बनाने की अनुमति देती है। इसका उपयोग करना बहुत आसान है, बस .js शामिल करें और इस तरह कुछ उपयोग करें:

<button id='markup-copy'>Copy Button</button>

<script>
document.getElementById('markup-copy').addEventListener('click', function() {
  clipboard.copy({
    'text/plain': 'Markup text. Paste me into a rich text editor.',
    'text/html': '<i>here</i> is some <b>rich text</b>'
  }).then(
    function(){console.log('success'); },
    function(err){console.log('failure', err);
  });

});
</script>

क्लिपबोर्ड.जेएस भी GitHub पर GitHub


आईई के अलावा अन्य ब्राउज़रों में आपको क्लिपबोर्ड में हेरफेर करने के लिए एक छोटी फ्लैश ऑब्जेक्ट का उपयोग करने की आवश्यकता है, उदाहरण के लिए


गीश, यकीन नहीं है कि किसी ने अभी तक इसकी ओर इशारा क्यों नहीं किया।

2018 में, दोस्तों, यहां आप इसके बारे में कैसे जा सकते हैं:

npm install clipboard --save

मेरे कोणीय 6+ कोड में इस प्रकार प्रयोग किया जाता है:

bower install clipboard --save

अगर मैं एक स्ट्रिंग में पास करता हूं, तो यह इसकी प्रतिलिपि बनाता है। यदि कुछ भी नहीं है, तो पृष्ठ के यूआरएल की प्रतिलिपि बनाते हैं।

क्लिपबोर्ड सामान के लिए और जिमनास्टिक भी किया जा सकता है। यहां अधिक जानकारी देखें:

https://developers.google.com/web/updates/2018/03/clipboardapi


मुझे निम्नलिखित समाधान मिला:

मेरे पास एक छिपे हुए इनपुट में टेक्स्ट है। चूंकि setSelectionRangeछिपे हुए इनपुट पर काम नहीं करता है, इसलिए मैंने अस्थायी रूप से टेक्स्ट को टेक्स्ट में बदल दिया, टेक्स्ट कॉपी किया और फिर इसे फिर से छुपाया। यदि आप किसी तत्व से टेक्स्ट कॉपी करना चाहते हैं, तो आप इसे फ़ंक्शन पर पास कर सकते हैं और लक्ष्य सामग्री में इसकी सामग्री को सहेज सकते हैं।

    jQuery('#copy').on('click', function () {
        copyToClipboard();
    });

    function copyToClipboard() {
        var target = jQuery('#hidden_text');

        // make it visible, so can be focused
        target.attr('type', 'text');
        target.focus();
        // select all the text
        target[0].setSelectionRange(0, target.val().length);

        // copy the selection
        var succeed;
        try {
            succeed = document.execCommand("copy");
        } catch (e) {
            succeed = false;
        }

        // hide input again
        target.attr('type', 'hidden');

        return succeed;
    }

मैंने एक साथ रखा है जो मुझे लगता है कि सबसे अच्छा है।

  • शैली के विपरीत आईई में अपवादों से बचने के लिए cssText का उपयोग करता है।
  • अगर कोई था तो चयन बहाल करता है
  • केवल पढ़ने के लिए सेट करता है इसलिए कीबोर्ड मोबाइल उपकरणों पर नहीं आता है
  • आईओएस के लिए एक कामकाज है ताकि यह वास्तव में काम करता है क्योंकि यह सामान्य रूप से execMommand को अवरुद्ध करता है।

यह रहा:

const copyToClipboard = (function initClipboardText() {
  const textarea = document.createElement('textarea');

  // Move it off screen.
  textarea.style.cssText = 'position: absolute; left: -99999em';

  // Set to readonly to prevent mobile devices opening a keyboard when
  // text is .select()'ed.
  textarea.setAttribute('readonly', true);

  document.body.appendChild(textarea);

  return function setClipboardText(text) {
    textarea.value = text;

    // Check if there is any content selected previously.
    const selected = document.getSelection().rangeCount > 0 ?
      document.getSelection().getRangeAt(0) : false;

    // iOS Safari blocks programmtic execCommand copying normally, without this hack.
    // https://.com/questions/34045777/copy-to-clipboard-using-javascript-in-ios
    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
      const editable = textarea.contentEditable;
      textarea.contentEditable = true;
      const range = document.createRange();
      range.selectNodeContents(textarea);
      const sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
      textarea.setSelectionRange(0, 999999);
      textarea.contentEditable = editable;
    } else {
      textarea.select();
    }

    try {
      const result = document.execCommand('copy');

      // Restore previous selection.
      if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
      }

      return result;
    } catch (err) {
      return false;
    }
  };
})();

यह @ चेस के उत्तर का विस्तार है, इस लाभ के साथ कि यह आईईएजी और टैबलेट तत्वों के लिए काम करेगा, न केवल आईई 9 पर डीआईवी।

if (document.createRange) {
    // IE9 and modern browsers
    var r = document.createRange();
    r.setStartBefore(to_copy);
    r.setEndAfter(to_copy);
    r.selectNode(to_copy);
    var sel = window.getSelection();
    sel.addRange(r);
    document.execCommand('Copy');  // does nothing on FF
} else {
    // IE 8 and earlier.  This stuff won't work on IE9.
    // (unless forced into a backward compatibility mode,
    // or selecting plain divs, not img or table). 
    var r = document.body.createTextRange();
    r.moveToElementText(to_copy);
    r.select()
    r.execCommand('Copy');
}

  <!DOCTYPE html>

  <style>
    #t {
      width: 1px
      height: 1px
      border: none
    }
    #t:focus {
      outline: none
    }
  </style>

  <script>
    function copy(text) {
      var t = document.getElementById('t')
      t.innerHTML = text
      t.select()
      try {
        var successful = document.execCommand('copy')
        var msg = successful ? 'successfully' : 'unsuccessfully'
        console.log('text coppied ' + msg)
      } catch (err) {
        console.log('Unable to copy text')
      }
      t.innerHTML = ''
    }
  </script>

  <textarea id=t></textarea>

  <button onclick="copy('hello world')">
    Click me
  </button>


अपने क्लिपबोर्ड पर एक चयनित टेक्स्ट ('टेक्स्ट टू कॉपी') की प्रतिलिपि बनाने के लिए, एक बुकमार्कलेट (ब्राउज़र बुकमार्क जो Javsacript निष्पादित करता है) बनाएं और इसे निष्पादित करें (उस पर क्लिक करें)। यह एक अस्थायी textarea बना देगा।

गीथूब से कोड:

https://gist.github.com/stefanmaric/2abf96c740191cda3bc7a8b0fc905a7d

function clipBoard(sCommand) {
  var oRange=contentDocument.createRange();
  oRange.setStart(startNode, startOffset);
  oRange.setEnd(endNode, endOffset);
/* This is where the actual selection happens.
in the above, startNode and endNode are dom nodes defining the beginning 
and end of the "selection" respectively. startOffset and endOffset are 
constants that are defined as follows:

END_TO_END: 2
END_TO_START: 3
NODE_AFTER: 1
NODE_BEFORE: 0
NODE_BEFORE_AND_AFTER: 2
NODE_INSIDE: 3
START_TO_END: 1
START_TO_START: 0

and would be used like oRange.START_TO_END */
      switch(sCommand) {
    case "cut":
          this.oFragment=oRange.extractContents();
      oRange.collapse();
      break;
    case "copy":
      this.oFragment=oRange.cloneContents();
      break;
    case "paste":
      oRange.deleteContents();
      var cloneFragment=this.oFragment.cloneNode(true)
      oRange.insertNode(cloneFragment);
      oRange.collapse();
      break;
  }
}

ऐसा लगता है कि मैंने सवाल को गलत तरीके से पढ़ा है, लेकिन संदर्भ के लिए, आप डीओएम (क्लिपबोर्ड पर नहीं, सभी आधुनिक ब्राउज़रों के साथ संगत) की एक श्रृंखला निकाल सकते हैं, और इसे क्लिपबोर्ड व्यवहार प्राप्त करने के लिए ऑनकॉपी और ऑनपेस्ट और ऑनबेनपेस्ट ईवेंट के साथ जोड़ सकते हैं। यह प्राप्त करने के लिए कोड यहां दिया गया है:

<p>
    <a onclick="window.clipboardData.setData('text', document.getElementById('Test').innerText);">Copy</a>
</p>

फ्लैश 10 के रूप में, यदि आप फ़्लैश ऑब्जेक्ट के साथ उपयोगकर्ता इंटरैक्शन से उत्पन्न होते हैं तो आप केवल क्लिपबोर्ड पर प्रतिलिपि बना सकते हैं। ( एडोब की फ्लैश 10 घोषणा से संबंधित अनुभाग पढ़ें )

समाधान कॉपी बटन के ऊपर अत्यधिक फ्लैश ऑब्जेक्ट है, या जो भी तत्व प्रतिलिपि शुरू करता है। ज़ीरो क्लिपबोर्ड वर्तमान में इस कार्यान्वयन के साथ सबसे अच्छी लाइब्रेरी है। अनुभवी फ्लैश डेवलपर्स सिर्फ अपनी पुस्तकालय बनाना चाहते हैं।


मुझे एक कस्टम ग्रिड संपादन (एक्सेल जैसे कुछ) और एक्सेल के साथ संगतता बनाने में एक ही समस्या थी। मुझे एकाधिक सेल्स, प्रतिलिपि बनाने और चिपकाने का समर्थन करना था।

समाधान: एक टेक्स्टरेरा बनाएं जहां आप उपयोगकर्ता के लिए प्रतिलिपि बनाने के लिए डेटा डालेंगे (मेरे लिए जब उपयोगकर्ता सेल का चयन कर रहे हों), उस पर फ़ोकस सेट करें (उदाहरण के लिए, जब उपयोगकर्ता दबाएं Ctrl) और संपूर्ण टेक्स्ट का चयन करें।

इसलिए, जब उपयोगकर्ता हिट करता है Ctrl+ Cवह चयनित कोशिकाओं को कॉपी करता है। टेक्सटेरा को केवल 1 पिक्सेल में बदलने का परीक्षण करने के बाद (मैंने परीक्षण नहीं किया कि यह प्रदर्शन पर काम करेगा: कोई नहीं)। यह सभी ब्राउज़रों पर अच्छी तरह से काम करता है, और यह उपयोगकर्ता के लिए पारदर्शी है।

पेस्टिंग - आप ऐसा ही कर सकते हैं (आपके लक्ष्य पर अलग-अलग) - टेक्स्टपेरा पर ध्यान रखें और ऑनपेस्ट का उपयोग करके पेस्ट ईवेंट पकड़ें (मेरी प्रोजेक्ट में मैं संपादित करने के लिए कोशिकाओं में टेक्स्टरेज़ का उपयोग करता हूं)।

मैं एक उदाहरण (वाणिज्यिक परियोजना) पेस्ट नहीं कर सकता, लेकिन आपको विचार मिल गया।


मेरी गलती। यह केवल आईई में काम करता है।

टेक्स्ट कॉपी करने का एक और तरीका यहां दिया गया है:

(function (text) {
  var node = document.createElement('textarea');
  var selection = document.getSelection();

  node.textContent = text;
  document.body.appendChild(node);

  selection.removeAllRanges();
  node.select();
  document.execCommand('copy');

  selection.removeAllRanges();
  document.body.removeChild(node);
})('Text To Copy');

मैं इसे बहुत सफलतापूर्वक उपयोग करता हूं ( बिना jquery या किसी अन्य ढांचे के)।

function copyToClp(txt){
    txt = document.createTextNode(txt);
    document.body.appendChild(txt);
    if (document.body.createTextRange) {
        var d = document.body.createTextRange();
        d.moveToElementText(txt);
        d.select();
        document.execCommand('copy');
    } else {
        var d = document.createRange();
        d.selectNodeContents(txt);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(d);
        document.execCommand('copy');
        window.getSelection().removeAllRanges();
    }
    txt.remove();
} 

चेतावनी

टैब को रिक्त स्थान में परिवर्तित किया जाता है (कम से कम क्रोम में)।






copy-paste