Jquery .html () и .text () удаляют лишние пробелы в IE7 и IE8 - PullRequest
Новая
       1

Jquery .html () и .text () удаляют лишние пробелы в IE7 и IE8

6 голосов
/ 10 января 2012

У меня есть фрагмент текста, сохраненный в 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);

Я пробовал и $('#contentTextOriginal').html();, и $('#contentTextOriginal').text(); в IE7 все, кроме одного пробела, удаляется из div.

Таким образом, текст отображается как

" Торговая площадь: 560 кв. Футов (52,02 кв. М) _ Вспомогательное хранилище: 678 кв. Футов (62,99 кв. М) _ Отдельный туалет / гардеробная Всего: 1238 кв. Футов (115,00 м2)"

Что мне нужно сделать, чтобы IE7 не удалил все пустое пространство?

Я использую редактор уценки, поэтому пробел важен, так как содержит некоторую информацию о форматировании.

Работает в любом другом браузере, только не в IE7

Ответы [ 3 ]

2 голосов
/ 10 января 2012

Проблема в том, что технически браузеры должны отображать пробел только тогда, когда они сталкиваются с пробелами. Таким образом, ряд пробелов и вкладок будет отображать один пробел в содержимом.

Обычно, чтобы предотвратить это, вы должны использовать: 

white-space: pre;

Чтобы сохранить все пустое пространство.

Проблема в том, что даже если вы применяете этот CSS к исходной области содержимого, он не сохраняет пустое пространство при копировании содержимого (хотя это происходит на дисплее, если вы показываете скрытое содержимое). Пример на 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 .

Например, вы могли бы создать форму с правильными входными данными (это всего лишь пример, так что дизайна не так много, он просто показывает, что возможно). 

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

См. Этот пример в действии .

2 голосов
/ 10 января 2012

Спасибо Уэскроу и Сони за то, что они указали мне правильное направление, почему это происходит.

В IE7 и IE8 используется код

$('#contentTextOriginal').html(); или $('#contentTextOriginal').text();

будет означать, что IE7 и IE8 удаляют любое форматирование, дополнительные пробелы / возвраты независимо от того, правильно ли установлен элемент, например, предварительно, пробел css.

Единственный способ обойти это - использовать функцию 

document.getElementById('contentTextOriginal').innerText;

Но этот innerText не поддерживается ни в одном другом стандартном совместимом браузере FF / Chrome.

Так что мне пришлось использовать условие 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();
    }

Я ненавижу использовать условные сценарии, если кто-то может придумать другой способ, которым я был бы очень признателен.

1 голос
/ 10 января 2012

Похоже, что эта проблема известна в IE7: http://www.quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html Не думаю, что есть решение для этой проблемы (по крайней мере, для текстовых полей).Для предварительных тегов (которые страдают от той же ошибки) вы можете вставить теги <br />.Может быть, вы могли бы попробовать это.

...