IE7とIE8でJqueryの.html（）と.text（）が余分な空白を削除しました

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> 

は、私はその後、私は両方 $('#contentTextOriginal').html();と​​3210 IE7でのすべてが、単一を試してみました

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

いくつかのjQueryを使って編集するユーザーのための入力フィールドに上記のHTMLを配置するためのリンクを使用していますスペースはdivから削除されます。

ので、テキストは、その後

「販売エリアとして表示されます：560平方フィート（52.02㎡） _Ancillaryストレージ：678平方フィート（62.99平方メートル）_ 独立したトイレ/クローク合計：1,238平方ft（115.00 m2） "

IE7ですべての空白を取り除くにはどうすればよいですか？

私はマークアップエディタを使用しているので、空白は書式設定情報の一部を保持するので重要です。他のすべてのブラウザで

作品だけではないIE7

Answer 1

これがなぜ起こっているのか正しい方向に私を指してくれたwescrowとSohneeに感謝します。

$('#contentTextOriginal').html();又は

​​3210にかかわらずアイテムが正しく例えば設定されている場合のいずれかのフォーマット、余分なスペース/戻りを除去IE7 & IE8を意味するコードを使用してIE7 & IE8で

プレ空白のCSS。

私はこのラウンドを取得することができる唯一の方法は、関数に

document.getElementById('contentTextOriginal').innerText; 

を使用していた。しかし、こののinnerTextは、他の標準に準拠し、ブラウザFF/Chromeでサポートされていません。

私は、IE8以下ではJSを使用し、その他のものではjQueryを使用する条件をJSに設定しました。

このようなものが動作します。

<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

技術的には、ブラウザは空白が発生したときにのみスペースをレンダリングすることになっています。そのため、一連のスペースとタブはコンテンツ内に1つのスペースをレンダリングします。

white-space: pre; 

をすべての空白を保持するには：あなたが使用することになり、これを防ぐために

通常。

このCSSを元のコンテンツ領域に適用しても、コンテンツをコピーするときに空白が保持されないという問題があります（非表示のコンテンツを表示すると表示されます）。 Example on JS Fiddle。

DOMにデータを格納するために、もっと多くのデータ形式を使用できますか？例えば

：あなたはその後、JSON websiteからいくつかの助けを借りて...あなたが好きなように巧妙になるこのデータを使用することができます

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

。

たとえば、正しい入力を含むフォームを作成することができます（これは単なる例であり、デザインがあまりないため、可能なことを示しています）。

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。