JavaScript html setter "eats"文本区域内的前导换行符 - 如何克服？

Question

已解决

这个问题以一种棘手的方式解决了。答案已发布below .

<小时/>

我有一个带有 white-space: pre; 样式的文本区域控件，在编辑新内容并将其存储到数据库中时效果非常好(完整，带有 \r\n)，并显示为 html 页面的内联部分(在具有相同样式的 div 内)。

当我尝试在弹出对话框中使用 AJAX 响应提供的相同文本区域编辑此类文本时，就会出现问题。我正在尝试通过 jQuery 将接收到的文本分配到文本区域:

$('#textfield').html(text);

实际上，在响应中收到了填充文本区域的整个对话框。

不幸的是，这个 html-setter 删除了前导换行符。有没有办法消除这种不一致的行为？通常会保存内容中进一步出现的换行符。

从服务器接收到的 html 代码示例:

<textarea id="newtext" cols="60" rows="3" style="white-space:pre;">
Text with line break at its start.
More line break</textarea>

将代码通过 html 放入容器后，我得到了这样的结果:

<textarea id="newtext" cols="60" rows="3" style="white-space:pre;">Text with line break at its start.
More line break</textarea>

附注从上下文中添加了更多代码，尽管我认为这可能不会有所帮助:

JavaScript:

var d = $('#dialog');

console.log(msg); // correct data
console.log('==============');

d.html(msg).css({position: "absolute", top: (pos.top + height) + "px", left: (pos.left + width) + "px"});

console.log(d.html()); // corrupted data

d.show();
$('#newtext').focus();

带有容器的 HTML:

<div id="dialog" class="popup">
</div>

更新:

正如@Pointy所建议的，这确实不是jQuery的问题。我将 html-setter 替换为普通的旧版本:

document.getElementById("dialog").innerHTML = msg;

也遇到了同样的问题。浏览器是Chrome。目前无法测试其他浏览器。

Answer 1

如果您实际上使用 <textarea> ，使用 .val 而不是 .html。

编辑 - 如果您在这里或那里插入东西，也许这更接近您的需要......

var textarea = $("<textarea>").val(query);
$(".div-container").append(textarea);
//or, if you're going to replace the one in there
$(".div-container textarea").replaceWith(textarea)

基本上，重点是您可以将带有 jquery 引用的变量分配给文本区域，然后您可以将其放在您需要的任何地方。