Jquery .html() y .text() eliminación de espacio en blanco adicional en IE7 e IE8

Question

Tengo un fragmento de texto almacenado en el html de la página como se ve a continuación.

<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> 

Estoy a continuación, utilizando un enlace para poner el HTML anterior en un campo de entrada para que el usuario edite el uso de algunos jQuery

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

He intentado tanto $('#contentTextOriginal').html(); y $('#contentTextOriginal').text(); en IE7 todos excepto un único el espacio se elimina del div.

lo tanto, el texto se muestra entonces como

"Área venta: 560 pies cuadrados (52,02 m²) almacenamiento _Ancillary: 678 pies cuadrados (62,99 m2) _ separados WC/Guardarropaen total: 1,238 sq ft (115.00 m2) "

¿Qué debo hacer para asegurarme de que IE7 no elimine todos los espacios en blanco?

Estoy usando un editor de marcas, por lo que el espacio en blanco es importante ya que contiene parte de la información de formato.

Trabaja en cualquier otro navegador, simplemente no IE7

Answer 1

Gracias a Wescrow y Sohnee por señalarme en la dirección correcta de por qué está sucediendo esto.

En IE7 IE8 & utilizando el código

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

significará IE7 IE8 & excluyendo cualquier formato, espacios adicionales/devuelve independientemente de si el artículo está correctamente ajustado, por ejemplo, pre, espacios en blanco css.

La única manera de que pudiera conseguir alrededor de esto era utilizar la función

document.getElementById('contentTextOriginal').innerText; 

Pero esto innerText no es compatible con cualquier otro navegador compatible con el estándar FF/cromo.

Así que he tenido que poner alguna condición JS en uso de texto interno para IE8 y abajo y jQuery para todo lo demás.

Algo así funcionará.

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

Odio el uso de scripts condicionales si alguien puede pensar en otra forma en la que estaría muy agradecido.

Answer 2

Parece que este problema se conoce con IE7: http://www.quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html No creo que hay una solución para ello (al menos para las áreas de texto). Para las etiquetas pre (que sufrieron del mismo error) puede insertar etiquetas <br />. Tal vez podrías intentar eso.

Answer 3

El problema es que, técnicamente, los navegadores solo deben representar un espacio cuando se encuentran con una franja de espacio en blanco. Entonces, una serie de espacios y pestañas rendirá un espacio único en el contenido.

Normalmente, para evitar que esto se debería utilizar:

white-space: pre; 

Para no perder ningún espacio en blanco.

El problema es que incluso si aplica este CSS al área de contenido original, no conserva el espacio en blanco cuando copia el contenido (aunque lo hace en la pantalla si muestra el contenido oculto). Example on JS Fiddle.

¿Quizás podría usar más de un formato de datos para almacenar los datos en el DOM?

Por ejemplo:

<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> 

continuación, puede utilizar estos datos para ser tan inteligente como te gusta ... con la ayuda de la JSON website.

Por ejemplo, puede crear un formulario con las entradas correctas (esto es solo un ejemplo, por lo que no hay mucho diseño, solo muestra lo que es posible).

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.