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();和$('#contentTextOriginal').text();，但是从div中删除了一个空格。

然后文本显示为

“销售面积：560平方英尺（52.02平方米） _附属仓库：678平方英尺（62.99平方米）_ 独立卫生间/衣帽间 总计：1,238平方英尺（115.00平方米）“

我需要做些什么才能确保IE7不会剥离所有空格？

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

适用于所有其他浏览器，而不是IE7

Answer 1

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

通常为了防止这种情况，你会使用：

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

Answer 2

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

在IE7＆amp; IE8使用代码

$('#contentTextOriginal').html();或$('#contentTextOriginal').text();

意味着IE7＆amp; IE8剥离任何格式，额外的空格/返回，无论项目是否设置正确，例如pre，white-space 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 3

看起来IE7已知这个问题：http://www.quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html我认为没有解决方法（至少对于textareas而言）。对于预标记（遇到相同的错误），您可以插入<br />标记。也许你可以试试。

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

3 个答案: