फ़्लैश के बिना क्लिपबोर्ड पर कॉपी करें

Question 1

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

Question 2

फ्लैश के बिना, यह ज्यादातर ब्राउज़र में संभव नहीं है। उपयोगकर्ता का क्लिपबोर्ड एक सुरक्षा-प्रासंगिक संसाधन है क्योंकि इसमें पासवर्ड या क्रेडिट कार्ड नंबर जैसी चीजें शामिल हो सकती हैं। इस प्रकार, ब्राउज़र सही तरीके से जावास्क्रिप्ट का उपयोग करने की अनुमति नहीं देते हैं (कुछ यह चेतावनी के साथ अनुमति देते हैं कि उपयोगकर्ता ने पुष्टि की है, या हस्ताक्षर किए गए जावास्क्रिप्ट कोड के साथ, लेकिन इनमें से कोई भी क्रॉस-ब्राउज़र नहीं है)।

Question 3

मैंने फ्लैश समाधान का प्रयास किया था और मुझे भी पसंद नहीं आया। बहुत जटिल और बहुत धीमा। मैंने जो किया वह एक टेक्स्टएरिया बनाने के लिए था, उसमें डेटा डाला और ब्राउज़र "CTRL + C" व्यवहार का उपयोग किया।

JQuery का जावास्क्रिप्ट हिस्सा:

// catch the "ctrl" combination keydown
$.ctrl = function(key, callback, args) {
    $(document).keydown(function(e) {
        if(!args) args=[]; // IE barks when args is null
        if(e.keyCode == key && e.ctrlKey) {
            callback.apply(this, args);
            return false;
        }
    });
};

// put your data on the textarea and select all
var performCopy = function() {
    var textArea = $("#textArea1");
    textArea.text('PUT THE TEXT TO COPY HERE. CAN BE A FUNCTION.');
    textArea[0].focus();
    textArea[0].select();
};

// bind CTRL + C
$.ctrl('C'.charCodeAt(0), performCopy);

HTML भाग:
<textarea id="textArea1"></textarea>

अब, आप यहाँ 'कॉपी टू कॉपी कॉपी' में कॉपी करना चाहते हैं। एक समारोह हो सकता है। ' क्षेत्र। मेरे लिए ठीक काम करता है। आपको बस एक CTRL + C संयोजन बनाना है। एकमात्र दोष यह है कि आप एक बदसूरत textarea है कि आप साइट में प्रदर्शित करने जा रहे हैं। यदि आप शैली का उपयोग करते हैं = "प्रदर्शन: कोई नहीं" प्रतिलिपि समाधान काम नहीं करेगा।

Question 4

क्लिपबोर्ड.जेएस को फ्लैश की आवश्यकता के बिना क्लिपबोर्ड पर कॉपी करने के लिए जारी किया गया है

इसे यहां कार्रवाई में देखें> http://zenorocha.github.io/clipboard.js/#example-action

Question 5

यह अंत में यहाँ है! (जब तक आप सफारी या IE8 का समर्थन नहीं करते ... -_-)

अब आप वास्तव में फ्लैश के बिना क्लिपबोर्ड कार्यों को संभाल सकते हैं। यहाँ प्रासंगिक दस्तावेज है:

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=en

https://msdn.microsoft.com/en-us/library/hh801227%28v=vs.85%29.aspx#copy

Question 6

^{जबकि बेसब्री से इंतजार कर के Xbrowser समर्थन के लिए क्लिपबोर्ड एपीआई ...}

यह क्रोम, फ़ायरफ़ॉक्स, एज, IE में खूबसूरती से काम करेगा

IE क्लिपबोर्ड का उपयोग करने के लिए केवल एक बार उपयोगकर्ता को संकेत देगा।
सफारी (लेखन के समय 5.1) के लिए समर्थन नहीं करता execCommandहैcopy/cut

/**
 * CLIPBOARD
 * https://stackoverflow.com/a/33337109/383904
 */
const clip = e => {
  e.preventDefault();
  
  const cont = e.target.innerHTML;
  const area = document.createElement("textarea");
  
  area.value = e.target.innerHTML; // or use .textContent
  document.body.appendChild(area);
  area.select();
 
  if(document.execCommand('copy')) console.log("Copied to clipboard");
  else prompt("Copy to clipboard:\nSelect, Cmd+C, Enter", cont); // Saf, Other
  
  area.remove();
};


[...document.querySelectorAll(".clip")].forEach(el => 
  el.addEventListener("click", clip)
);

<a class="clip" href="#!">Click an item to copy</a><br>
<a class="clip" href="#!"><i>Lorem</i></a><br>
<a class="clip" href="#!"><b>IPSUM</b></a><br>

<textarea placeholder="Paste here to test"></textarea>

स्निपेट का विस्तार करें

सभी ब्राउज़रों (फ़ायरफ़ॉक्स को छोड़कर जो केवल माइम संभाल करने में सक्षम है टाइप "plain/text"जहाँ तक मैं परीक्षण किया है) है लागू नहीं किया क्लिपबोर्ड एपीआई । यानी, क्रोम का उपयोग करके क्लिपबोर्ड ईवेंट को पढ़ने की कोशिश कर रहा है

var clipboardEvent = new ClipboardEvent("copy", {
        dataType: "plain/text",
        data: "Text to be sent to clipboard"
});

फेंकता है: अनकहा टाइप टाइप: अवैध कंस्ट्रक्टर

ब्राउज़रों और क्लिपबोर्ड के बीच होने वाले अविश्वसनीय गड़बड़ का सबसे अच्छा संसाधन यहां देखा जा सकता है (caniuse.com) (→ "नोट्स" के तहत टिप्पणियों का पालन करें )।
MDN का कहना है कि बुनियादी समर्थन सभी ब्राउज़रों के लिए "(YES)" है , जो गलत है क्योंकि कम से कम एपीआई को काम करने की उम्मीद होगी।

Question 7

आप HTML पृष्ठ पर स्थानीय क्लिपबोर्ड का उपयोग कर सकते हैं। यह आपको HTML पृष्ठ पर सामग्री को कॉपी / कट / पेस्ट करने की अनुमति देता है, लेकिन / से तीसरे पक्ष के अनुप्रयोगों के बीच या दो HTML पृष्ठों के बीच नहीं।

यह है कि आप ऐसा करने के लिए एक कस्टम फ़ंक्शन कैसे लिख सकते हैं (क्रोम और फ़ायरफ़ॉक्स में परीक्षण किया गया है):

यहाँ FIDDLE है जो दर्शाता है कि आप यह कैसे कर सकते हैं।

मैं संदर्भ के लिए यहाँ भी फ़ाइडल पेस्ट करूँगा।

एचटीएमएल

<p id="textToCopy">This is the text to be copied</p>
<input id="inputNode" type="text" placeholder="Copied text will be pasted here" /> <br/>

<a href="#" onclick="cb.copy()">copy</a>
<a href="#" onclick="cb.cut()">cut</a>
<a href="#" onclick="cb.paste()">paste</a>

जे एस

function Clipboard() {
    /* Here we're hardcoding the range of the copy
    and paste. Change to achieve desire behavior. You can
    get the range for a user selection using
    window.getSelection or document.selection on Opera*/
    this.oRange = document.createRange();
    var textNode = document.getElementById("textToCopy");
    var inputNode = document.getElementById("inputNode");
    this.oRange.setStart(textNode,0);
    this.oRange.setEndAfter(textNode);
    /* --------------------------------- */
}

Clipboard.prototype.copy = function() {
    this.oFragment= this.oRange.cloneContents();
};

Clipboard.prototype.cut = function() {
    this.oFragment = this.oRange.extractContents();
};

Clipboard.prototype.paste = function() {
    var cloneFragment=this.oFragment.cloneNode(true)
    inputNode.value = cloneFragment.textContent;
};

window.cb = new Clipboard();

Question 8

document.execCommand('copy')जो चाहोगे, करोगे। लेकिन cruft के बिना इस धागे में सीधे प्रयोग करने योग्य उदाहरण नहीं थे, इसलिए यहां यह है:

var textNode = document.querySelector('p').firstChild
var range = document.createRange()
var sel = window.getSelection()

range.setStart(textNode, 0)
range.setEndAfter(textNode)
sel.removeAllRanges()
sel.addRange(range)
document.execCommand('copy')

Question 9

चारों ओर रास्ता नहीं है, आपको फ्लैश का उपयोग करना होगा। एक jQuery प्लगइन है, जिसे jquery.copy कहा जाता है, जो फ़्लैश (swf) फ़ाइल का उपयोग करके क्रॉस ब्राउज़र कॉपी और पेस्ट प्रदान करता है। यह मेरे ब्लॉग पर वाक्य रचना हाइलाइटर के समान है।

एक बार जब आप jquery.copy.js फ़ाइल का संदर्भ लेते हैं, तो आपको क्लिपबोर्ड में डेटा पुश करने के लिए सभी की आवश्यकता होती है:

$.copy("some text to copy");

अच्छा और आसान ;)