दिलचस्प पोस्ट
डिज़ाइन के अंदर छवि छवि के नीचे अतिरिक्त जगह है पटरियों: लिंक (यूआरएल) को मान्य करने का एक अच्छा तरीका क्या है? एक सूची में तत्वों की आवृत्ति कैसे गिनेंगी? धीमे इंटरनेट कनेक्शन का अनुकरण करना Google App Engine में सभी डेटास्टोर को कैसे हटाएं? किसी ऐसे पृष्ठ पर सभी तत्व ढूंढें जिनके तत्व आईडी में jQuery का उपयोग करके एक निश्चित टेक्स्ट होता है एंड्रॉइड में काउंटरडाउन टायमर को रोकें जब गतिविधि सामने नहीं होती है जावास्क्रिप्ट regex में उपयोग के लिए स्ट्रिंग एस्केप ऊंचे-ऊतक भिन्नता (उदाहरण के लिए "डॉट-स्टेमस्टाफ") को एक हाइफ़ेन से अलग शब्द (जैसे "दो-कुछ-सामान") कन्वर्ट करने का सबसे शानदार तरीका क्या है? वसंत एमवीसी सभी अनुरोध मैपिंग प्राप्त करें Iframe में google.com कैसे दिखाना है? जावास्क्रिप्ट डॉम: कंटेनर में तत्व सूचक खोजें कैसे आप एक jQuery UI प्रगति पट्टी के लिए मूल्य चेतन करते हैं? रिलीज़ संस्करण आईओएस स्विफ्ट के लिए println () निकालें एंड्रॉइड एप्लिकेशन को कैसे पूरा करें?

जावास्क्रिप्ट पेस्ट इवेंट (क्रॉस ब्राउज़र) पर क्लिपबोर्ड डेटा प्राप्त करता है

वेब एप्लिकेशन एक पेस्ट इवेंट का पता लगा सकता है और चिपकाने के लिए डेटा पुनर्प्राप्त कर सकता है?

पाठ को एक अमीर टेक्स्ट एडिटर में चिपकाए जाने से पहले मैं HTML सामग्री को हटाना चाहूंगा

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

आदर्श रूप से, समाधान को सभी आधुनिक ब्राउज़रों (जैसे, एमएसआईई, गीको, क्रोम और सफारी) में काम करना चाहिए।

ध्यान दें कि MSIE में clipboardData.getData() डेटाटेटाटेटा clipboardData.getData() , लेकिन मुझे अन्य ब्राउज़रों के लिए इसी प्रकार की कार्यक्षमता नहीं मिल सका।

Solutions Collecting From Web of "जावास्क्रिप्ट पेस्ट इवेंट (क्रॉस ब्राउज़र) पर क्लिपबोर्ड डेटा प्राप्त करता है"

यह उत्तर लिखने के बाद स्थिति बदल गई है: अब कि फ़ायरफ़ॉक्स ने संस्करण 22 में समर्थन जोड़ा है, सभी प्रमुख ब्राउज़रों अब पेस्ट ईवेंट में क्लिपबोर्ड डेटा तक पहुंचने में सहायता करते हैं। एक उदाहरण के लिए निको बर्न्स का उत्तर देखें

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

जब आपको पुराने ब्राउज़रों का समर्थन करने की आवश्यकता होती है, तो आप क्या कर सकते हैं काफी कुछ शामिल है और फ़ायरफ़ॉक्स 2+, आईई 5.5+ और सफारी या क्रोम जैसे वेबकेट ब्राउज़रों में काम करेगा। TinyMCE और CKEditor दोनों के हाल के संस्करण इस तकनीक का उपयोग करते हैं:

  1. एक कीप्रेस ईवेंट हैंडलर का उपयोग करके एक ctrl-v / shift-ins ईवेंट का पता लगाएं
  2. उस हैंडलर में, वर्तमान उपयोगकर्ता चयन को बचाने के लिए, दस्तावेज़ में एक टेक्स्टएरा तत्व ऑफ़-स्क्रीन (बाएं -1000 पिक्स में कहते हैं) को जोड़ें, designMode बंद करें और designMode focus() पर कॉल focus() करें, इस प्रकार कैरेट को आगे बढ़ाना और पेस्ट को प्रभावी ढंग से रीडायरेक्ट करना
  3. designMode मान को स्टोर करने वाले किसी अन्य फ़ंक्शन को कॉल करने के लिए, दस्तावेज़ से designMode , designMode वापस चालू करने, उपयोगकर्ता चयन को पुनर्स्थापित करने और पाठ को designMode लिए ईवेंट हैंडलर में एक संक्षिप्त संक्षिप्त टाइमर (1 मिलिसेकंड कहते हैं) सेट करें।

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

अप्रभावित घटना में आपको फ़ायरफ़ॉक्स 2 का समर्थन करने की ज़रूरत है, ध्यान दें कि आपको उस ब्राउज़र में WYSIWYG संपादक iframe के दस्तावेज़ की बजाय मूल दस्तावेज में टेक्स्टेरिया रखना होगा।

समाधान # 1 (सादा पाठ केवल और फ़ायरफ़ॉक्स 22 + की आवश्यकता है)

IE6 +, एफएफ 22+, क्रोम, सफारी, एज के लिए काम करता है (केवल आईई 9 + में परीक्षण किया गया है, लेकिन कम संस्करणों के लिए काम करना चाहिए)

अगर आपको एचटीएमएल या फ़ायरफ़ॉक्स चिपकाने के लिए समर्थन चाहिए, तो <= 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 फ़ंक्शन के लिए पैरामीटर 'टेक्स्ट' का getData करता है, जो गैर मानक है। हालांकि, यह लेखन के समय सभी ब्राउज़रों में काम करता है।


समाधान # 2 (HTML और Firefox के लिए काम करता है <= 22)

IE6 +, एफएफ 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 ईवेंट में handlePaste फ़ंक्शन से जुड़ा हुआ है और एक एकल तर्क पारित किया गया है: पेस्ट ईवेंट के लिए event ऑब्जेक्ट। हमारे लिए विशेष हित की clipboardData इस घटना की संपत्ति है जो गैर-अर्थात् ब्राउज़रों में क्लिपबोर्ड पहुंच को सक्षम करता है। IE में समतुल्य window.clipboardData है। window.clipboardData , हालांकि इसमें थोड़ा अलग एपीआई है

नीचे संसाधन अनुभाग देखें।


handlepaste फ़ंक्शन:

इस समारोह में दो शाखाएं हैं

event.clipboardData के अस्तित्व के लिए पहला चेक और जांचता है कि क्या यह types संपत्ति में 'text / html' ( types या तो एक DOMStringList हो सकता है जो पद्धति का उपयोग करके जांच की जाती है, या एक स्ट्रिंग जो indexOf विधि का उपयोग करके जांच की जाती है)। यदि इन सभी शर्तों को पूरा किया गया है, तो हम '# text / plain' के बजाय 'टेक्स्ट / html' को छोड़कर समाधान # 1 के रूप में आगे बढ़ते हैं। यह वर्तमान में क्रोम और फ़ायरफ़ॉक्स 22+ में काम करता है

यदि यह विधि समर्थित नहीं है (अन्य सभी ब्राउज़रों), तो हम

  1. तत्व की सामग्री को DocumentFragment सहेजें
  2. तत्व खाली करें
  3. waitForPastedData फ़ंक्शन को कॉल करें

waitforpastedata फ़ंक्शन:

यह फ़ंक्शंस चिपकाए गए डेटा के लिए पहले चुनाव (एक बार 20ms), जो आवश्यक है क्योंकि यह सीधे प्रदर्शित नहीं होता है जब डेटा दिखाई देता है:

  1. एक चर में संपादन योग्य डिवा (जो अब चिपकाए गए डेटा है) का आंतरिक HTML बचाता है
  2. दस्तावेज़फ़्रेग्मेंट में सहेजी गई सामग्री को पुनर्स्थापित करता है
  3. पुनः प्राप्त आंकड़ों के साथ 'प्रोसेस पेस्ट' फ़ंक्शन कॉल करता है

processpaste फ़ंक्शन:

चिपकाए गए डेटा के साथ मनमानी चीजें इस मामले में हम सिर्फ डेटा को सचेत करते हैं, आप जो चाहें कर सकते हैं। आप संभवतया किसी प्रकार की डेटा सिनिटाइज़िंग प्रक्रिया के माध्यम से चिपकाए गए डेटा को चलाने के लिए चाहते हैं।


कर्सर की स्थिति को सहेजना और बहाल करना

एक वास्तविक साइटशन में आप शायद पहले सेव को सहेजना चाहते हैं, और बाद में इसे पुनर्स्थापित करें ( सामग्री पर कर्सर की स्थिति सेट करेंअक्षम <div> )। तब आप उस स्थान पर चिपकाए गए डेटा को डालने के लिए कर सकते थे जब कर्सर उस स्थिति में था जब उपयोगकर्ता ने पेस्ट एक्शन शुरू किया था।

संसाधन:

टॉम डाउन के लिए धन्यवाद, डॉक्यूमेंटफ़्रेग्मेंट के उपयोग का सुझाव देने के लिए, और क्लिपबोर्ड के लिए स्ट्रिंग के बजाय DOMStringList के उपयोग के कारण फ़ायरफ़ॉक्स में एक त्रुटि को पकड़ने के लिए abligh। Data.types

सरल संस्करण: (jQuery)

 $(document).on('paste','[contenteditable]',function(e) { e.preventDefault(); var text = (e.originalEvent || e).clipboardData.getData('text/plain'); window.document.execCommand('insertText', false, text); }); 

clipboardData का उपयोग करना

डेमो: http://jsbin.com/vokovividu/edit?js,output

IE एज, फ़ायरफ़ॉक्स, क्रोम, सफारी, ओपेरा का परीक्षण

लाइव डेमो

Chrome / FF / IE11 पर परीक्षण किया गया

एक क्रोम / आईई झुंझलाहट है जो कि ये ब्राउज़रों प्रत्येक नई रेखा के लिए <div> तत्व जोड़ते हैं इस बारे में एक पोस्ट यहां है और यह कंटैक्टिवेटिव तत्व को display:inline-block करने के लिए तय किया जा सकता display:inline-block

कुछ हाइलाइट किए गए HTML का चयन करें और उसे यहां पेस्ट करें:

 function onPaste(e){ var content; e.preventDefault(); if( e.clipboardData ){ content = e.clipboardData.getData('text/plain'); document.execCommand('insertText', false, content); return false; } else if( window.clipboardData ){ content = window.clipboardData.getData('Text'); if (window.getSelection) window.getSelection().getRangeAt(0).insertNode( document.createTextNode(content) ); } } /////// EVENT BINDING ///////// document.querySelector('[contenteditable]').addEventListener('paste', onPaste); 
 [contenteditable]{ /* chroem bug: https://stackoverflow.com/a/24689420/104380 */ display:inline-block; width: calc(100% - 40px); min-height:120px; margin:10px; padding:10px; border:1px dashed green; } /* mark HTML inside the "contenteditable" (Shouldn't be any OFC!)' */ [contenteditable] *{ background-color:red; } 
 <div contenteditable></div> 

मैंने टिम डाउन्स के लिए अवधारणा का एक छोटा सा सबूत लिखा है जो ऑफ-स्क्रीन टेक्सटेरा के साथ है। और यहाँ कोड जाता है:

 <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script language="JavaScript"> $(document).ready(function() { var ctrlDown = false; var ctrlKey = 17, vKey = 86, cKey = 67; $(document).keydown(function(e) { if (e.keyCode == ctrlKey) ctrlDown = true; }).keyup(function(e) { if (e.keyCode == ctrlKey) ctrlDown = false; }); $(".capture-paste").keydown(function(e) { if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)){ $("#area").css("display","block"); $("#area").focus(); } }); $(".capture-paste").keyup(function(e) { if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)){ $("#area").blur(); //do your sanitation check or whatever stuff here $("#paste-output").text($("#area").val()); $("#area").val(""); $("#area").css("display","none"); } }); }); </script> </head> <body class="capture-paste"> <div id="paste-output"></div> <div> <textarea id="area" style="display: none; position: absolute; left: -99em;"></textarea> </div> </body> </html> 

बस पूरे कोड को एक HTML फ़ाइल में पेस्ट और पेस्ट करें (ctrl-v का उपयोग करके) दस्तावेज़ पर कहीं भी क्लिपबोर्ड से।

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

इस कोड का उपयोग करने के लिए स्वतंत्र महसूस करें और अगर आप कुछ सुधार या समस्याओं के साथ आते हैं तो उन्हें वापस पोस्ट करें। यह भी ध्यान दें कि मैं कोई जावास्क्रिप्ट डेवलपर नहीं हूं, इसलिए मुझे कुछ याद हो सकता है (=> अपनी खुद की जांच करें)।

L2aelba एनवेडर के आधार पर यह एफएफ, सफारी, क्रोम, आईई (8, 9, 10 और 11) पर परीक्षण किया गया था

  $("#editText").on("paste", function (e) { e.preventDefault(); var text; var clp = (e.originalEvent || e).clipboardData; if (clp === undefined || clp === null) { text = window.clipboardData.getData("text") || ""; if (text !== "") { if (window.getSelection) { var newNode = document.createElement("span"); newNode.innerHTML = text; window.getSelection().getRangeAt(0).insertNode(newNode); } else { document.selection.createRange().pasteHTML(text); } } } else { text = clp.getData('text/plain') || ""; if (text !== "") { document.execCommand('insertText', false, text); } } }); 

यह कोई भी सेटटाइमआउट () का उपयोग नहीं करता है

मैंने क्रॉस ब्राउज़र समर्थन प्राप्त करने के लिए इस महान लेख का उपयोग किया है।

 $(document).on("focus", "input[type=text],textarea", function (e) { var t = e.target; if (!$(t).data("EventListenerSet")) { //get length of field before paste var keyup = function () { $(this).data("lastLength", $(this).val().length); }; $(t).data("lastLength", $(t).val().length); //catch paste event var paste = function () { $(this).data("paste", 1);//Opera 11.11+ }; //process modified data, if paste occured var func = function () { if ($(this).data("paste")) { alert(this.value.substr($(this).data("lastLength"))); $(this).data("paste", 0); this.value = this.value.substr(0, $(this).data("lastLength")); $(t).data("lastLength", $(t).val().length); } }; if (window.addEventListener) { t.addEventListener('keyup', keyup, false); t.addEventListener('paste', paste, false); t.addEventListener('input', func, false); } else {//IE t.attachEvent('onkeyup', function () { keyup.call(t); }); t.attachEvent('onpaste', function () { paste.call(t); }); t.attachEvent('onpropertychange', function () { func.call(t); }); } $(t).data("EventListenerSet", 1); } }); 

इस कोड को पेस्ट से पहले चयन संचालन के साथ बढ़ाया गया है: डेमो

चिपकाए गए टेक्स्ट को साफ करने और चिपकाए गए टेक्स्ट के साथ वर्तमान में चयनित पाठ को बदलने के लिए मामला बहुत तुच्छ है:

 <div id='div' contenteditable='true' onpaste='handlepaste(this, event)'>Paste</div> 

जे एस:

 function handlepaste(el, e) { document.execCommand('insertText', false, e.clipboardData.getData('text/plain')); e.preventDefault(); } 

मेरे लिए काम करने वाला समाधान ईवेंट इनपुट को पेस्ट करने के लिए ईवेंट श्रोता जोड़ रहा है यदि आप किसी पाठ इनपुट में पेस्ट कर रहे हैं चूंकि इनपुट परिवर्तनों में पाठ से पहले पेस्ट ईवेंट होता है, मेरे पेस्ट हैंडल के अंदर मैं एक स्थगित फ़ंक्शन का निर्माण करता हूं जिसके अंदर मैं पेस्ट पर हुआ मेरे इनपुट बॉक्स में बदलाव की जांच करता हूं:

 onPaste: function() { var oThis = this; setTimeout(function() { // Defer until onPaste() is done console.log('paste', oThis.input.value); // Manipulate pasted input }, 1); } 

यह सभी ब्राउज़रों पर काम करना चाहिए जो ओपन पेस्ट और उत्परिवर्तक पर्यवेक्षक का समर्थन करते हैं।

यह समाधान केवल पाठ पाने से परे एक कदम है, इससे पहले कि वह एक तत्व में चिपकाए जाने से पहले आपको चिपकाए गए सामग्री को संपादित करने की अनुमति देता है

यह कंटैक्टेड, ऑन्पेस्ट इवेंट (सभी प्रमुख ब्राउज़रों द्वारा समर्थित) और उत्परिवर्तन पर्यवेक्षकों (क्रोम, फ़ायरफ़ॉक्स और IE11 + द्वारा समर्थित) का उपयोग करके काम करता है।

चरण 1

सामग्री के साथ एक HTML- तत्व बनाएँ

 <div contenteditable="true" id="target_paste_element"></div> 

चरण 2

अपने जावास्क्रिप्ट कोड में निम्नलिखित इवेंट जोड़ें

 document.getElementById("target_paste_element").addEventListener("paste", pasteEventVerifierEditor.bind(window, pasteCallBack), false); 

हमें पेस्टकाल्बैक को बाँधने की आवश्यकता है, क्योंकि उत्परिवर्तक पर्यवेक्षक को एसिंक्रोनस रूप से बुलाया जाएगा।

चरण 3

निम्न कोड को अपने कोड में जोड़ें

 function pasteEventVerifierEditor(callback, e) { //is fired on a paste event. //pastes content into another contenteditable div, mutation observer observes this, content get pasted, dom tree is copied and can be referenced through call back. //create temp div //save the caret position. savedCaret = saveSelection(document.getElementById("target_paste_element")); var tempDiv = document.createElement("div"); tempDiv.id = "id_tempDiv_paste_editor"; //tempDiv.style.display = "none"; document.body.appendChild(tempDiv); tempDiv.contentEditable = "true"; tempDiv.focus(); //we have to wait for the change to occur. //attach a mutation observer if (window['MutationObserver']) { //this is new functionality //observer is present in firefox/chrome and IE11 // select the target node // create an observer instance tempDiv.observer = new MutationObserver(pasteMutationObserver.bind(window, callback)); // configuration of the observer: var config = { attributes: false, childList: true, characterData: true, subtree: true }; // pass in the target node, as well as the observer options tempDiv.observer.observe(tempDiv, config); } } function pasteMutationObserver(callback) { document.getElementById("id_tempDiv_paste_editor").observer.disconnect(); delete document.getElementById("id_tempDiv_paste_editor").observer; if (callback) { //return the copied dom tree to the supplied callback. //copy to avoid closures. callback.apply(document.getElementById("id_tempDiv_paste_editor").cloneNode(true)); } document.body.removeChild(document.getElementById("id_tempDiv_paste_editor")); } function pasteCallBack() { //paste the content into the element. restoreSelection(document.getElementById("target_paste_element"), savedCaret); delete savedCaret; pasteHtmlAtCaret(this.innerHTML, false, true); } saveSelection = function(containerEl) { if (containerEl == document.activeElement) { var range = window.getSelection().getRangeAt(0); var preSelectionRange = range.cloneRange(); preSelectionRange.selectNodeContents(containerEl); preSelectionRange.setEnd(range.startContainer, range.startOffset); var start = preSelectionRange.toString().length; return { start: start, end: start + range.toString().length }; } }; restoreSelection = function(containerEl, savedSel) { containerEl.focus(); var charIndex = 0, range = document.createRange(); range.setStart(containerEl, 0); range.collapse(true); var nodeStack = [containerEl], node, foundStart = false, stop = false; while (!stop && (node = nodeStack.pop())) { if (node.nodeType == 3) { var nextCharIndex = charIndex + node.length; if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) { range.setStart(node, savedSel.start - charIndex); foundStart = true; } if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) { range.setEnd(node, savedSel.end - charIndex); stop = true; } charIndex = nextCharIndex; } else { var i = node.childNodes.length; while (i--) { nodeStack.push(node.childNodes[i]); } } } var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } function pasteHtmlAtCaret(html, returnInNode, selectPastedContent) { //function written by Tim Down var sel, range; if (window.getSelection) { // IE9 and non-IE sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); // Range.createContextualFragment() would be useful here but is // only relatively recently standardized and is not supported in // some browsers (IE9, for one) var el = document.createElement("div"); el.innerHTML = html; var frag = document.createDocumentFragment(), node, lastNode; while ( (node = el.firstChild) ) { lastNode = frag.appendChild(node); } var firstNode = frag.firstChild; range.insertNode(frag); // Preserve the selection if (lastNode) { range = range.cloneRange(); if (returnInNode) { range.setStart(lastNode, 0); //this part is edited, set caret inside pasted node. } else { range.setStartAfter(lastNode); } if (selectPastedContent) { range.setStartBefore(firstNode); } else { range.collapse(true); } sel.removeAllRanges(); sel.addRange(range); } } } else if ( (sel = document.selection) && sel.type != "Control") { // IE < 9 var originalRange = sel.createRange(); originalRange.collapse(true); sel.createRange().pasteHTML(html); if (selectPastedContent) { range = sel.createRange(); range.setEndPoint("StartToStart", originalRange); range.select(); } } 

}

कोड क्या करता है:

  1. कोई व्यक्ति ctrl-v, contextmenu या अन्य तरीकों का उपयोग करके पेस्ट ईवेंट को निकाल देता है
  2. पेस्ट इवेंट में सामग्री बनाने योग्य के साथ एक नया तत्व बनाया गया है (सामग्री के साथ एक तत्व को बढ़ाया विशेषाधिकार है)
  3. लक्ष्य तत्व का कैरेट स्थिति बचाई गई है।
  4. फोकस नए तत्व पर सेट है
  5. सामग्री नए तत्व में चिपक जाती है और DOM में प्रदान की जाती है।
  6. उत्परिवर्तन पर्यवेक्षक यह पकड़ता है (यह डोम पेड़ और सामग्री में सभी परिवर्तन दर्ज करता है)। फिर उत्परिवर्तन की घटना को आग लगाता है।
  7. चिपकाए गए सामग्री का डोम एक वेरिएबल में क्लोन हो जाता है और कॉलबैक पर वापस आ जाता है। अस्थायी तत्व नष्ट हो गया है।
  8. कॉलबैक को क्लोन डोम प्राप्त होता है कैरेट को बहाल किया गया है। इससे पहले कि आप इसे अपने लक्ष्य में जोड़ दें, आप इसे संपादित कर सकते हैं। तत्व। इस उदाहरण में मैं कैरेट को सहेज / पुनर्स्थापित करने और तत्व में HTML चिपकाने के लिए टिम डाउन फ़ंक्शन का उपयोग कर रहा हूं।

टिम डाउन के लिए बहुत धन्यवाद, इस जवाब के लिए इस पोस्ट को देखें:

पेस्ट ईवेंट पर दस्तावेज़ पर पेस्ट की गई सामग्री प्राप्त करें

यह निको के उत्तर पर एक टिप्पणी के लिए बहुत लंबा था, जिसे मुझे फ़ायरफ़ॉक्स पर कोई टिप्पणी नहीं (टिप्पणी के अनुसार) लगता है और सफारी पर मेरे लिए काम नहीं करता जैसा है।

सबसे पहले, अब आप क्लिपबोर्ड से सीधे पढ़ सकते हैं। इसके बजाय कोड की तरह:

 if (/text\/plain/.test(e.clipboardData.types)) { // shouldn't this be writing to elem.value for text/plain anyway? elem.innerHTML = e.clipboardData.getData('text/plain'); } 

उपयोग:

 types = e.clipboardData.types; if (((types instanceof DOMStringList) && types.contains("text/plain")) || (/text\/plain/.test(types))) { // shouldn't this be writing to elem.value for text/plain anyway? elem.innerHTML = e.clipboardData.getData('text/plain'); } 

क्योंकि फ़ायरफ़ॉक्स में एक types क्षेत्र है जो एक DOMStringList जो test लागू नहीं करता है।

अगला फ़ायरफ़ॉक्स पेस्ट की अनुमति नहीं देगा जब तक कि फोकस किसी contenteditable=true फ़ील्ड में न हो।

अंत में, फ़ायरफ़ॉक्स मज़बूती से पेस्ट की अनुमति नहीं देगा जब तक कि फोकस एक textarea (या शायद इनपुट) में न हो जो केवल contenteditable=true नहीं contenteditable=true बल्कि:

  • display:none नहीं display:none
  • visibility:hidden नहीं visibility:hidden
  • शून्य आकार का नहीं

मैं पाठ फ़ील्ड को छिपाने की कोशिश कर रहा था, इसलिए मैं जेएस वीएनसी एम्यूलेटर पर काम पेस्ट कर सकता था (यानी यह एक रिमोट क्लाइंट पर जा रहा था और इसमें वास्तव में कोई textarea इत्यादि नहीं था)। मुझे ऊपर दिए गए क्षेत्रों में टेक्स्ट फ़ील्ड को छिपाने की कोशिश करनी पड़ रही है, जहां यह कभी-कभी काम करती है, लेकिन आम तौर पर दूसरे पेस्ट पर विफल (या जब फ़ील्ड को समान डेटा को दो बार चिपकाने के लिए मंजूरी दे दी गई थी), क्योंकि फ़ील्ड फ़ोकस खो गया और ठीक से वापस नहीं आएगा focus() बावजूद focus() मैं जिस समाधान के साथ आया था उसे z-order: -1000 में रखना था z-order: -1000 , इसे display:none , इसे 1px के रूप में 1px बनाओ, और सभी रंगों को पारदर्शी बनाएं। छी।

सफारी पर, आप उपर्युक्त का दूसरा भाग लागू होता है, यानी आपको एक textarea जो display:none नहीं display:none

सबसे पहले जो दिमाग में आता है Google के क्लोजर विथ के पेस्टहेन्डलर है http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/pastehandler.html

यह मेरे लिए काम किया:

 function onPasteMe(currentData, maxLen) { // validate max length of pasted text var totalCharacterCount = window.clipboardData.getData('Text').length; } <input type="text" onPaste="return onPasteMe(this, 50);" /> 

यह समाधान html टैग की जगह है, यह सरल और क्रॉस-ब्राउज़र है; इस jsfiddle की जांच: http://jsfiddle.net/tomwan/cbp1u2cx/1/ , कोर कोड:

 var $plainText = $("#plainText"); var $linkOnly = $("#linkOnly"); var $html = $("#html"); $plainText.on('paste', function (e) { window.setTimeout(function () { $plainText.html(removeAllTags(replaceStyleAttr($plainText.html()))); }, 0); }); $linkOnly.on('paste', function (e) { window.setTimeout(function () { $linkOnly.html(removeTagsExcludeA(replaceStyleAttr($linkOnly.html()))); }, 0); }); function replaceStyleAttr (str) { return str.replace(/(<[\w\W]*?)(style)([\w\W]*?>)/g, function (a, b, c, d) { return b + 'style_replace' + d; }); } function removeTagsExcludeA (str) { return str.replace(/<\/?((?!a)(\w+))\s*[\w\W]*?>/g, ''); } function removeAllTags (str) { return str.replace(/<\/?(\w+)\s*[\w\W]*?>/g, ''); } 

नोटिस: आपको पीठ की ओर एक्सएसएस फ़िल्टर के बारे में कुछ काम करना चाहिए क्योंकि यह समाधान '<< >>' जैसे तार फ़िल्टर नहीं कर सकता

आप इस तरह से ऐसा कर सकते हैं:

पूर्व और पोस्ट पेस्ट ईवेंट के लिए इस jQuery प्लगइन का उपयोग करें:

 $.fn.pasteEvents = function( delay ) { if (delay == undefined) delay = 20; return $(this).each(function() { var $el = $(this); $el.on("paste", function() { $el.trigger("prepaste"); setTimeout(function() { $el.trigger("postpaste"); }, delay); }); }); }; 

अब आप इस प्लगइन का उपयोग कर सकते हैं;

 $('#txt').on("prepaste", function() { $(this).find("*").each(function(){ var tmp=new Date.getTime(); $(this).data("uid",tmp); }); }).pasteEvents(); $('#txt').on("postpaste", function() { $(this).find("*").each(function(){ if(!$(this).data("uid")){ $(this).removeClass(); $(this).removeAttr("style id"); } }); }).pasteEvents(); 

explaination

पहले डेटा तत्व के रूप में सभी मौजूदा तत्वों के लिए यूआईडी सेट करें।

फिर सभी नोड्स पोस्ट करें पेस्ट ईवेंट की तुलना करें तो तुलना करके आप नए डाला एक की पहचान कर सकते हैं क्योंकि उन्हें एक यूआईडी होगा, तो बस नए बने तत्वों से शैली / वर्ग / आईडी विशेषता हटा दें, ताकि आप अपने पुराने स्वरूपण को रख सकें।

 $('#dom').on('paste',function (e){ setTimeout(function(){ console.log(e.currentTarget.value); },0); }); 

बस अपने सामग्री को संपादित करने योग्य डिवा में हमेशा की तरह ब्राउजर पेस्ट करें और फिर पेस्ट के बाद पाठ के साथ कस्टम टेक्स्ट शैलियों के लिए इस्तेमाल किए जाने वाले स्पैन तत्वों को स्वैप करें। This seems to work okay in internet explorer and the other browsers I tried…

 $('[contenteditable]').on('paste', function (e) { setTimeout(function () { $(e.target).children('span').each(function () { $(this).replaceWith($(this).text()); }); }, 0); }); 

This solution assumes that you are running jQuery and that you don't want text formatting in any of your content editable divs .

The plus side is that it's super simple.

 function myFunct( e ){ e.preventDefault(); var pastedText = undefined; if( window.clipboardData && window.clipboardData.getData ){ pastedText = window.clipboardData.getData('Text'); } else if( e.clipboardData && e.clipboardData.getData ){ pastedText = e.clipboardData.getData('text/plain'); } //work with text } document.onpaste = myFunct; 

This is an existing code posted above but I have updated it for IE's, the bug was when the existing text is selected and pasted will not delete the selected content. This has been fixed by the below code

 selRange.deleteContents(); 

See complete code below

 $('[contenteditable]').on('paste', function (e) { e.preventDefault(); if (window.clipboardData) { content = window.clipboardData.getData('Text'); if (window.getSelection) { var selObj = window.getSelection(); var selRange = selObj.getRangeAt(0); selRange.deleteContents(); selRange.insertNode(document.createTextNode(content)); } } else if (e.originalEvent.clipboardData) { content = (e.originalEvent || e).clipboardData.getData('text/plain'); document.execCommand('insertText', false, content); } });