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。