समाधान # 1 (केवल सादा पाठ और फ़ायरफ़ॉक्स 22+ की आवश्यकता है)
IE6 +, FF 22+, Chrome, Safari, Edge के लिए काम करता है (केवल IE9 + में परीक्षण किया गया है, लेकिन निम्न संस्करणों के लिए काम करना चाहिए)
यदि आपको HTML या फ़ायरफ़ॉक्स <= 22 चिपकाने के लिए समर्थन की आवश्यकता है, तो समाधान # 2 देखें।
एचटीएमएल
<div id='editableDiv' contenteditable='true'>Paste</div>
जावास्क्रिप्ट
function handlePaste (e) {
var clipboardData, pastedData;
// Stop data actually being pasted into div
e.stopPropagation();
e.preventDefault();
// Get pasted data via clipboard API
clipboardData = e.clipboardData || window.clipboardData;
pastedData = clipboardData.getData('Text');
// Do whatever with pasteddata
alert(pastedData);
}
document.getElementById('editableDiv').addEventListener('paste', handlePaste);
JSFiddle: https://jsfiddle.net/swL8ftLs/12/
ध्यान दें कि यह समाधान getDataफ़ंक्शन के लिए पैरामीटर 'टेक्स्ट' का उपयोग करता है , जो कि गैर-मानक है। हालाँकि, यह लेखन के समय सभी ब्राउज़रों में काम करता है।
समाधान # 2 (HTML और फ़ायरफ़ॉक्स के लिए काम करता है <= 22)
IE6 +, FF 3.5+, क्रोम, सफारी, एज में परीक्षण किया गया
एचटीएमएल
<div id='div' contenteditable='true'>Paste</div>
जावास्क्रिप्ट
var editableDiv = document.getElementById('editableDiv');
function handlepaste (e) {
var types, pastedData, savedContent;
// Browsers that support the 'text/html' type in the Clipboard API (Chrome, Firefox 22+)
if (e && e.clipboardData && e.clipboardData.types && e.clipboardData.getData) {
// Check for 'text/html' in types list. See abligh's answer below for deatils on
// why the DOMStringList bit is needed. We cannot fall back to 'text/plain' as
// Safari/Edge don't advertise HTML data even if it is available
types = e.clipboardData.types;
if (((types instanceof DOMStringList) && types.contains("text/html")) || (types.indexOf && types.indexOf('text/html') !== -1)) {
// Extract data and pass it to callback
pastedData = e.clipboardData.getData('text/html');
processPaste(editableDiv, pastedData);
// Stop the data from actually being pasted
e.stopPropagation();
e.preventDefault();
return false;
}
}
// Everything else: Move existing element contents to a DocumentFragment for safekeeping
savedContent = document.createDocumentFragment();
while(editableDiv.childNodes.length > 0) {
savedContent.appendChild(editableDiv.childNodes[0]);
}
// Then wait for browser to paste content into it and cleanup
waitForPastedData(editableDiv, savedContent);
return true;
}
function waitForPastedData (elem, savedContent) {
// If data has been processes by browser, process it
if (elem.childNodes && elem.childNodes.length > 0) {
// Retrieve pasted content via innerHTML
// (Alternatively loop through elem.childNodes or elem.getElementsByTagName here)
var pastedData = elem.innerHTML;
// Restore saved content
elem.innerHTML = "";
elem.appendChild(savedContent);
// Call callback
processPaste(elem, pastedData);
}
// Else wait 20ms and try again
else {
setTimeout(function () {
waitForPastedData(elem, savedContent)
}, 20);
}
}
function processPaste (elem, pastedData) {
// Do whatever with gathered data;
alert(pastedData);
elem.focus();
}
// Modern browsers. Note: 3rd argument is required for Firefox <= 6
if (editableDiv.addEventListener) {
editableDiv.addEventListener('paste', handlepaste, false);
}
// IE <= 8
else {
editableDiv.attachEvent('onpaste', handlepaste);
}
JSFiddle: https://jsfiddle.net/nicoburns/wrqmuabo/23/
व्याख्या
onpasteकी घटना divहै handlePaste: समारोह इसे से जुड़ी है और एक भी तर्क पारित कर दिया eventपेस्ट घटना के लिए वस्तु। हमारे लिए विशेष रूप से रुचि clipboardDataइस घटना की संपत्ति है जो क्लिपबोर्ड को गैर-अर्थात ब्राउज़रों में उपयोग करने में सक्षम बनाती है। IE में समतुल्य है window.clipboardData, हालांकि इसमें थोड़ा अलग एपीआई है।
नीचे संसाधन अनुभाग देखें।
handlepasteसमारोह:
इस फ़ंक्शन की दो शाखाएँ हैं।
के अस्तित्व के लिए पहली जाँच करता है event.clipboardDataऔर जाँचता है कि क्या इसमें typesसंपत्ति 'पाठ / html' है ( typesया तो विधि DOMStringListका उपयोग करके जाँच की जा सकती है contains, या एक स्ट्रिंग जो indexOfविधि का उपयोग करके जाँच की जाती है )। यदि ये सभी शर्तें पूरी हो जाती हैं, तो हम '# पाठ / सादे' के बजाय 'टेक्स्ट / html' को छोड़कर, समाधान # 1 में आगे बढ़ते हैं। यह वर्तमान में Chrome और Firefox 22+ में काम करता है।
यदि यह विधि समर्थित नहीं है (सभी अन्य ब्राउज़र), तो हम
- तत्व की सामग्री को एक में सहेजें
DocumentFragment
- तत्व को खाली करो
waitForPastedDataफ़ंक्शन को कॉल करें
waitforpastedataसमारोह:
यह फ़ंक्शन पहले चिपकाया गया डेटा (एक बार प्रति 20ms) के लिए मतदान करता है, जो आवश्यक है क्योंकि यह सीधे दिखाई नहीं देता है। जब डेटा दिखाई दिया है:
- एक चर के लिए संपादन योग्य div (जो अब चिपकाया गया डेटा है) के आंतरिक HTML को बचाता है
- DocumentFragment में सहेजी गई सामग्री को पुनर्स्थापित करता है
- पुनर्प्राप्त डेटा के साथ 'processPaste' फ़ंक्शन को कॉल करता है
processpasteसमारोह:
चिपकाया डेटा के साथ मनमानी करता है। इस मामले में हम केवल डेटा को सचेत करते हैं, आप जो चाहें कर सकते हैं। आप शायद किसी तरह की डेटा सैनिटाइजिंग प्रक्रिया के माध्यम से पेस्ट किए गए डेटा को चलाना चाहेंगे।
कर्सर स्थिति को सहेजना और पुनर्स्थापित करना
एक वास्तविक स्थिति में, आप शायद चयन से पहले बचाना चाहते हैं, और बाद में इसे पुनर्स्थापित करना चाहते हैं ( सेट करें सामग्री स्थिति पर कर्सर <div> )। आप उस स्थिति में चिपकाए गए डेटा को डाल सकते हैं जब कर्सर उस स्थिति में था जब उपयोगकर्ता ने पेस्ट क्रिया शुरू की थी।
संसाधन:
किसी दस्तावेज़फ़्रेगमेंट के उपयोग का सुझाव देने के लिए टिम डाउन का धन्यवाद, और क्लिपबोर्ड के लिए एक स्ट्रिंग के बजाय DOMStringList के उपयोग के कारण फ़ायरफ़ॉक्स में एक त्रुटि को पकड़ने के लिए abligh।