0

我有一个 span.value 元素，其中包含 nl2br('lots of text')，我将使用 textarea 对其进行编辑，单击按钮时会出现在 span.value 的位置，其中包含当前文本。

涉及代码：

1 valObject = $(this).parent().find('span.value');

2 curVal = valObject.text();

3 $(this).parent().find('span.value').html('<textarea style="width:660px; height:100px;">'+curVal+'</textarea>');

4 sendValue = $(this).parent().find('input, textarea').val();

5 valObject.html(sendValue);

现在，如果我第二次进入编辑模式，所有换行符都消失了。我不想在每次编辑时刷新页面。有什么帮助吗？我只是不明白是什么导致它的行为方式。如果我第一次进入“编辑模式”，它会获得换行符，在 textarea 中按应有的方式显示文本，在离开“编辑模式”后，它仍会在 span.value 元素上显示应有的文本. 但是一旦我第二次进入“编辑模式”，所有的地狱都会崩溃，世界就结束了。有什么帮助吗？

4

2 回答 2

2

您正在修改 DOM，就好像它是 HTML 一样。DOM 不是 HTML。规则不同。一旦浏览器解释了 HTML，HTML 就消失了。它已成为一种 DOM 结构。如果您稍后要求浏览器提供 HTML，它会将 DOM 结构转换为 HTML。此 HTML 不太可能与您的原始 HTML 相同。

特别是这会影响空白。如果一行中有多个空格字符，它们将被缩减为一个。因此，多个空格、制表符、换行符和诸如此类的东西将成为一个单一的空白字符。这在返回给您的 HTML 中是正确的。

如果要在 DOM 结构和 HTML 之间进行转换，不要期望 HTML 保持不变。你不能依赖这个。

于 2013-11-13T12:23:47.033 回答
1

加入white-space: pre-wrap样式<textarea>

$(this).parent().find('span.value').html('<textarea style="width:660px; white-space: pre-wrap; height:100px;">'+curVal+'</textarea>');
于 2013-11-13T12:24:40.243 回答