0

解决了

问题以一种棘手的方式解决。答案贴在下面。

我有一个带有样式的 textarea 控件，它在编辑新内容、将其存储到数据库中（完整、带有）以及显示为 html 页面的内联部分（在具有相同样式的 div 内）white-space: pre;时效果很好。\r\n

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

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

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

不幸的是，这个 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>

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

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。目前无法测试其他浏览器。

4

3 回答 3

2

如果您实际使用的是<textarea>.val，请使用 .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 引用的变量分配给 textarea，然后您可以将其放在您需要的任何地方。

于 2012-12-07T20:16:57.150 回答
0

你能text = text.match(/[^\n]+/g).join('<br>');在用s.html(text)替换新行之前做吗？<br>

于 2012-12-07T21:02:49.060 回答
0

我有一个解决方法，非常简单。进入textarea的原始HTML代码：

<textarea id="newtext" cols="60" rows="3" style="white-space:pre;"><?php echo $templateVariablePlaceholder; ?></textarea>

我在打开标签后添加了一个换行符：

<textarea id="newtext" cols="60" rows="3" style="white-space:pre;">
<?php echo $templateVariablePlaceholder; ?></textarea>

现在它按预期工作。

于 2012-12-07T21:30:39.403 回答