Jquery .html（）和.text（）在IE7和IE8中删除额外的空格

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> 

我然后使用链接放置在HTML上方的输入字段用户使用一些jQuery的

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

我已经试过在IE7都$('#contentTextOriginal').html();和​​3210所有，但单一的编辑空间从div剥离。

，使文本则显示为

“销售面积：560平方英尺（52.02平方米） _Ancillary存储：678平方英尺（62.99平方米）_ 独立卫生间/衣帽间总计：1238平方米ft（115.00 m2）“

我需要做些什么来确保IE7不会去掉所有的空白空间？

我正在使用降价编辑器，因此它的白色空间很重要，因为它包含了一些格式化信息。

作品在其他浏览器，只是没有IE7

Answer 1

感谢wescrow和Sohnee指出我为什么发生这种事情的正确方向。

在IE7 & IE8使用的代码

$('#contentTextOriginal').html();或​​3210

是否意味着IE7 & IE8剥出的任何格式，额外的空格/返回不管项目中设定正确的例如pre，空白css。

我能避开这个问题的唯一方法是使用功能

document.getElementById('contentTextOriginal').innerText; 

但在任何其他标准兼容的浏览器FF/Chrome浏览器不支持此的innerText。

所以我已经把一些条件JS中使用内部文本的IE8和以下和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我不认为这是它一个固定（至少对于文字区域）。对于预标签（遇到同样的错误），您可以插入<br />标签。也许你可以尝试一下。

Answer 3

问题是，从技术上讲，浏览器只能在遇到空白区域时渲染空间。因此，一系列空格和制表符将在内容中呈现单个空间。

通常情况下，以防止这一点，你可以使用：

white-space: pre; 

要保留所有的空白。

问题是，即使您将此CSS应用到原始内容区域，它在复制内容时也不会保留空白区域（尽管它在显示中会显示隐藏内容）。 Example on JS Fiddle。

也许你可以使用更多的数据格式来存储数据在DOM中？

例如：

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