Jquery .html() và .text() xoá khoảng trắng thừa trong IE7 & IE8

Question

Tôi có một đoạn văn bản được lưu trữ trong html của trang như được thấy bên dưới.

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

tôi sau đó sử dụng một liên kết để đặt mã HTML trên trong một lĩnh vực đầu vào cho người sử dụng để chỉnh sửa bằng một số jQuery

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

Tôi đã thử cả hai $('#contentTextOriginal').html(); và $('#contentTextOriginal').text(); trong IE7 tất cả ngoại trừ một đơn không gian bị tước khỏi div.

Vì vậy, các văn bản sau đó được hiển thị như

Diện tích bán hàng ": 560 sq ft (52,02 m²) lưu trữ _Ancillary: 678 sq ft (62,99 m2) _ riêng WC/cloakroomTổng cộng: 1.238 sq ft (115.00 m2) "

tôi cần phải làm gì để đảm bảo IE7 không loại bỏ được tất cả khoảng trắng?

Tôi đang sử dụng trình chỉnh sửa đánh dấu để không gian trắng quan trọng vì nó chứa một số thông tin định dạng.

trình ở mọi trình duyệt khác, chỉ cần không IE7

Answer 1

Nhờ wescrow và Sohnee đã chỉ cho tôi đúng hướng để biết tại sao điều này xảy ra.

Trong IE7 & IE8 sử dụng mã

$('#contentTextOriginal').html(); hoặc $('#contentTextOriginal').text();

sẽ có nghĩa là IE7 & IE8 tước ra bất kỳ định dạng, thêm dấu cách/trả không phân biệt nếu mặt hàng đó được đặt đúng ví dụ trước, không gian trắng css.

Cách duy nhất tôi có thể nhận được vòng này là để sử dụng chức năng

document.getElementById('contentTextOriginal').innerText; 

Nhưng innerText này không được hỗ trợ trong bất kỳ trình duyệt phù hợp tiêu chuẩn khác FF/Chrome.

Vì vậy, tôi đã đặt một số điều kiện JS để sử dụng văn bản bên trong cho IE8 và bên dưới và jQuery cho mọi thứ khác.

Thứ gì đó như thế này sẽ hoạt động.

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

Tôi ghét sử dụng tập lệnh có điều kiện nếu có ai đó có thể nghĩ ra một cách khác mà tôi sẽ biết ơn nhất.

Answer 2

Dường như vấn đề này được biết đến với IE7: http://www.quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html Tôi không nghĩ rằng có một sửa chữa cho nó (ít nhất là cho textareas). Đối với các thẻ trước (bị lỗi tương tự), bạn có thể chèn các thẻ <br />. Có lẽ bạn có thể thử điều đó.

Answer 3

Vấn đề là về mặt kỹ thuật, trình duyệt chỉ được phép hiển thị không gian khi chúng gặp phải một khoảng trắng. Vì vậy, một loạt các không gian và các tab sẽ hiển thị một không gian duy nhất trong nội dung.

Thông thường để tránh tình trạng này bạn sẽ sử dụng:

white-space: pre; 

Để duy trì tất cả các khoảng trắng.

Vấn đề là ngay cả khi bạn áp dụng CSS này cho vùng nội dung gốc, nó không giữ khoảng trắng khi bạn sao chép nội dung (mặc dù nó hiển thị trong màn hình nếu bạn hiển thị nội dung ẩn). Example on JS Fiddle.

Có lẽ bạn có thể sử dụng nhiều định dạng dữ liệu hơn để lưu trữ dữ liệu trong DOM?

Ví dụ:

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

Sau đó bạn có thể sử dụng dữ liệu này để được như thông minh như bạn muốn ... với một số sự giúp đỡ từ các JSON website. Ví dụ, bạn có thể tạo biểu mẫu có đầu vào chính xác (đây chỉ là một ví dụ, do đó không có nhiều thiết kế, nó chỉ hiển thị những gì có thể).

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.