Jquery .html() और .text() आईई 7 और आईई 8

Question

में अतिरिक्त सफेद जगह को हटाकर मेरे पास नीचे दिए गए पृष्ठ के HTML में संग्रहीत टेक्स्ट का एक टुकड़ा है।

<div id="contentTextOriginal" style="display: none;"> 
_Sales Area: 560 sq ft (52.02 m²)_ _Ancillary storage: 678 sq ft (62.99 m2)_ _Separate W.C./Cloakroom_ 

**Total: 1,238 sq ft (115.00 m2)**</div> 

मैं तो एक इनपुट क्षेत्र में ऊपर एचटीएमएल जगह के लिए एक लिंक का उपयोग कर रहा उपयोगकर्ता के लिए कुछ jQuery

var textToEdit = $('#contentTextOriginal').text(); 
    $('.editorTextBox').val(textToEdit); 

मैं दोनों $('#contentTextOriginal').html(); और $('#contentTextOriginal').text(); IE7 में सभी लेकिन एक भी कोशिश की है का उपयोग कर संपादित करने के लिए अंतरिक्ष div से छीन लिया गया है।

तो पाठ तो के रूप में

"बिक्री क्षेत्र प्रदर्शित होता है: 560 वर्ग फुट (52.02 वर्ग मीटर) _Ancillary भंडारण: 678 वर्ग फुट (62.99 मीटर 2) _ अलग शौचालय/कपड़द्वारकुल: 1,238 वर्ग फीट (115.00 एम 2) "

यह सुनिश्चित करने के लिए मुझे क्या करना होगा कि आईई 7 ने सभी सफेद जगहों को बाहर नहीं निकाला है?

मैं एक मार्कडाउन संपादक का उपयोग कर रहा हूं, इसलिए सफेद स्थान महत्वपूर्ण है क्योंकि इसमें कुछ स्वरूपण जानकारी है। हर दूसरे ब्राउज़र में

काम करता है, बस IE7

Answer 1

वेसक्रो और सोहेनी के लिए धन्यवाद, यह सही दिशा में मुझे यह इंगित करने के लिए धन्यवाद कि यह क्यों हो रहा है।

IE7 & IE8 में कोड का उपयोग कर

$('#contentTextOriginal').html(); या $('#contentTextOriginal').text();

IE7 & IE8 मतलब होगा यदि आइटम सही रूप से सेट किया गया है जैसे की परवाह किए बिना किसी भी स्वरूपण, अतिरिक्त रिक्त स्थान/रिटर्न बाहर अलग करना पूर्व, सफेद अंतरिक्ष सीएसएस।

एक ही रास्ता मैं इस दौर मिल सकता है समारोह

document.getElementById('contentTextOriginal').innerText; 

का इस्तेमाल किया गया लेकिन इस innerText किसी अन्य मानक अनुरूप ब्राउज़र एफएफ/क्रोम में समर्थित नहीं है।

तो मैंने आईई 8 और नीचे और अन्य सभी चीज़ों के लिए jQuery के अंदरूनी पाठ का उपयोग करने में कुछ शर्त जेएस डालने की है।

ऐसा कुछ काम करेगा।

<script type="text/javascript"> 
     var i_am_old_ie = false; 
    </script> 
    <!--[if LT IE 8]> 
    <script type="text/javascript"> 
      i_am_old_ie = true; 
    </script> 
    <![endif]--> 

    if (i_am_old_ie) { 
     textToEdit = document.getElementById('contentTextOriginal' + id).innerText; 
    } else { 
     textToEdit = $('#contentTextOriginal' + id).html(); 
    } 

मैं सशर्त स्क्रिप्ट का उपयोग करता है, तो किसी को भी एक और तरीका है मैं सबसे आभारी होंगे के बारे में सोच सकते हैं नफरत है।

Answer 2

ऐसा लगता है कि इस समस्या को IE7 के साथ जाना जाता है नहीं: http://www.quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html मुझे नहीं लगता कि इसके लिए एक ठीक (कम से कम textareas के लिए) है है। पूर्व टैग के लिए (जो एक ही बग से पीड़ित है) आप <br /> टैग डाल सकते हैं। शायद आप कोशिश कर सकते हैं।

Answer 3

समस्या यह है कि तकनीकी रूप से, ब्राउज़रों को केवल एक जगह प्रदान करना होता है जब उन्हें सफेद-स्थान का सामना करना पड़ता है। इसलिए रिक्त स्थान और टैब की एक श्रृंखला सामग्री में एक ही स्थान प्रदान करेगी।

आम तौर पर इसे रोकने के लिए आप का प्रयोग करेंगे:

white-space: pre; 

सभी सफेद स्थान को संरक्षित करने के।

समस्या यह है कि यदि आप इस सीएसएस को मूल सामग्री क्षेत्र में लागू करते हैं, तो यह सामग्री की प्रतिलिपि करते समय सफेद-स्थान को संरक्षित नहीं करता है (हालांकि यदि आप छुपी हुई सामग्री दिखाते हैं तो यह प्रदर्शन में होता है)। Example on JS Fiddle।

शायद आप डीओएम में डेटा स्टोर करने के लिए डेटा प्रारूप का अधिक उपयोग कर सकते हैं?

उदाहरण के लिए:

<div id="contentTextOriginal" style="display: none;"> 
{ 
    salesArea: "560 sq ft (52.02 m²)", 
    ancillaryStorage: "678 sq ft (62.99 m2)", 
    notes: "separate W.C./Cloakroom", 
    total: "1,238 sq ft (115.00 m2)" 
}</div> 

फिर आप इस डेटा का उपयोग कर सकते हैं के रूप में चतुर होने के लिए के रूप में आप की तरह ... JSON website से कुछ मदद के साथ।

उदाहरण के लिए, आप सही इनपुट के साथ एक फॉर्म बना सकते हैं (यह सिर्फ एक उदाहरण है, इसलिए बहुत अधिक डिज़ाइन नहीं है, यह केवल दिखाता है कि क्या संभव है)।

var originalContent = $("#contentTextOriginal").text(); 
var jsonData = eval('(' + originalContent + ')'); 

var dynamicForm = ''; 
for (var key in jsonData) { 
    if (jsonData.hasOwnProperty(key)) { 
    dynamicForm += '<p><label>' + key + '<br><input type="text" value="' + jsonData[key] + '" name="' + key + '" size="40"></label></p>'; 
    } 
} 

$("#contentTextOriginal").after(dynamicForm); 

See this example in action।