संवेदनात्मक केवल सादा पाठ

Question

की अनुमति देता है मैं एक संतोषजनक बनाने की कोशिश कर रहा हूं जो केवल सादा पाठ स्वीकार करता है।

जो मैं चाहता हूं वह पेस्ट ईवेंट सुनना है और फिर सभी एचटीएमएल को हटा दें और सामग्री को केवल सादे पाठ के रूप में पेस्ट करें।

ऐसा करने के लिए मैंने पहले से ही दो अलग-अलग दृष्टिकोणों की कोशिश की है, समान प्रश्नों के आधार पर, लेकिन उन दो दृष्टिकोणों में समस्याएं हैं।

पहले: यह एक का उपयोग नहीं कर रहा है "पेस्ट" श्रोता, बजाय निवेश के लिए सुन रहा है (इस मामले के लिए आदर्श नहीं), यह एक समाधान Clipboard API का उपयोग कर से बचने के लिए किया गया था।

समस्या: यह क्रोम पर ठीक काम करता है, लेकिन नहीं फ़ायरफ़ॉक्स और IE पर, जब आप कॉपी और html यह सफलतापूर्वक एचटीएमएल और केवल पेस्ट पाठ को हटा पेस्ट, लेकिन जब पाठ लिखने के लिए जारी कैरट हमेशा लिया जाता है संतुष्ट की शुरुआत के लिए।

function convertToPlaintext() { 
    var textContent = this.textContent; 
    this.textContent = textContent; 
} 

var contentEditableNodes = document.querySelectorAll('.plaintext[contenteditable]'); 

[].forEach.call(contentEditableNodes, function(div) { 
    div.addEventListener("input", convertToPlaintext, false); 
}); 

आप इसे यहाँ कोशिश कर सकते हैं/कोड है जिस पर मैं आधारित:http://jsbin.com/moruseqeha/edit?html,css,js,output

दूसरा: के बाद से पहले एक में विफल रहा है और "पेस्ट" बात नहीं सुन रहा है घटना केवल, मैं फिर हमने इसे Clipboard API का उपयोग करने का प्रयास करने का निर्णय लिया। यहां समस्या यह है कि IE document.execCommand ("insertHTML", false, text) पर; काम नहीं कर रहा है। यह क्रोम, फ़ायरफ़ॉक्स (v41 और v42 पर परीक्षण) और किनारे पर काम करता है।

document.querySelector(".plaintext[contenteditable]").addEventListener("paste", function(e) { 
    e.preventDefault(); 
    var text = ""; 
    if (e.clipboardData && e.clipboardData.getData) { 
    text = e.clipboardData.getData("text/plain"); 
    } else if (window.clipboardData && window.clipboardData.getData) { 
    text = window.clipboardData.getData("Text"); 
    } 
    document.execCommand("insertHTML", false, text); 
}); 

आप इसे यहाँ की कोशिश कर सकते हैं: http://jsfiddle.net/marinagon/461uye5p/

किसी को भी मदद कर सकते हैं मुझे इस समस्याओं में से कुछ के लिए एक समाधान खोजने के या किसी को भी यहाँ प्रस्तुत की तुलना में एक बेहतर समाधान है?

मुझे पता है कि मैं टेक्स्टरेरा का उपयोग कर सकता हूं, लेकिन मेरे पास इसका उपयोग न करने के कारण हैं।

---

अद्यतन - समाधान पाया

मैं दूसरा दृष्टिकोण के लिए एक समाधान मिल गया। document.execCommand ("insertHTML", false, text) के बाद से; आईई पर काम नहीं करता है मैंने एक और समाधान की खोज की है और यह एक https://stackoverflow.com/a/2925633/4631604 पाया है।

यहाँ आप सभी ब्राउज़रों में समाधान काम कर जुर्माने के साथ दूसरा दृष्टिकोण देख सकते हैं http://jsfiddle.net/marinagon/1v63t05q/

Answer 1

एक contenteditable तत्व के बजाय एक textarea तत्व का उपयोग करें: _{^{(जोर मेरा)}}

textarea तत्व का प्रतिनिधित्व करता है तत्व के कच्चे मूल्य के लिए एक multiline सादा पाठ संपादित नियंत्रण।

उदाहरण:

/* Auto resize height */ 
 
var textarea = document.querySelector('textarea'); 
 
(textarea.oninput = function() { 
 
    textarea.style.height = 0; 
 
    textarea.style.height = textarea.scrollHeight + 'px'; 
 
})();

textarea { width: 100%; }

<textarea>Hello! You can edit my content. But only plain-text!!!</textarea>

Answer 2

गंदा हैक चिपकाया डेटा साफ करने के लिए।

function onpaste(e, el){ 
     setTimeout(function(){ 
      el.innerText = el.innerText; 
     }, 10); 
}