JQuery.html () and .text () removes extra spaces in IE7 and IE8

Question

I have a piece of text stored in an html page as shown below.

<div id="contentTextOriginal" style="display: none;"> _Sales Area: 560 sq ft (52.02 m²)_ _Ancillary storage: 678 sq ft (62.99 m2)_ _Separate WC/Cloakroom_ **Total: 1,238 sq ft (115.00 m2)**</div> 

Then I use the link to place the HTML above in the input box for user editing with some jQuery

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

I tried as $('#contentTextOriginal').html(); , so $('#contentTextOriginal').text(); in IE7, but only one space is removed from the div.

So the text is displayed as

"Sales area: 560 sq. Ft. (52.02 m²) _ Auxiliary storage: 678 sq. Ft. (62.99 m2) _ Separate WC / Wardrobe Total: 1,238 sq. M (115.00 m2) "

What do I need to do so that IE7 does not disable all spaces?

I use the label editor, so empty space is important because it contains some formatting information.

Works in any other browser, not in IE7

Answer 1

Thanks to wescrow and Sohnee for pointing me in the right direction why this is happening.

In IE7 and IE8 using code

$('#contentTextOriginal').html(); or $('#contentTextOriginal').text();

It will mean that IE7 and IE8 remove any formatting, extra spaces / returns regardless of whether the element is set correctly, for example. pre, white-space css.

The only way I could get around this is to use the function

 document.getElementById('contentTextOriginal').innerText; 

But this innerText is not supported in any other standard FF / Chrome browser.

So, I have hasd to set some JS condition for using inner text for IE8 and below, and jQuery for everything else.

Something like this will work.

  <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(); } 

I hate using conditional scripts, if someone could think of something else, I would be very grateful.

Answer 2

The problem is that technically, browsers should only display space when they encounter a white space gap. Thus, a series of spaces and tabs will display a single space in the content.

Usually to prevent this you should use:

 white-space: pre; 

To save all spaces.

The problem is that even if you apply this CSS to the original content area, it does not preserve white space when copying content (although it appears on the display if you show hidden content). JS script example .

Perhaps you could use a larger data format to store data in the DOM?

For instance:

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

Then you can use this data as smart as you like ... using the JSON site .

For example, you can create a form with the correct inputs (this is just an example, so the design is not so much, it just shows what is possible).

 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 .

Answer 3

This problem seems to be known in IE7: http://www.quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html I don't think there is a fix for it (at least for scrollable). For pre-tags (which suffered from the same error), you can insert <br /> tags. Perhaps you could try this.