12

你能解释一下为什么会这样：

<script type="text/javascript">
   document.write("<textarea cols='10' rows='10'>" + "\nhello\nbabe\n" + "</textarea>");
</script>

呈现一个底部有一个新行的文本区域，但顶部没有新行？

在此处输入图像描述

已测试 IE8、FF11、Safari 5.1、Chrome 24

这不是 JS 问题，即使您在页面中编写 HTML 也会得到相同的结果，即

<textarea cols='10' rows='10'>
hello
babe
</textarea>

第一条新线还是不见了！！！

我需要在顶部添加另一个新行以显示一个：

document.write("<textarea cols='10' rows='10'>" + "\n\nhello\nbabe\n" + "</textarea>");
4

6 回答 6

5

在 XHTML 内部编写时使用适当的实体。

<textarea>&#13;hello</textarea>

如果文本节点以空格（空格、换行）开头，HTML 解析器将忽略它。将新行编码为适当的 HTML 实体会强制解析器对其进行确认。

&#13; == carriage return
于 2013-03-20T16:49:39.037 回答
5

回答“为什么”这个问题。这在 HTML 5 规范中的章节中指定，该章节描述了如何从 HTML 文档中的标签创建 DOM 树。

在当前的 HTML 5 生活标准中，它是“12.2 解析 HTML 文档”>“12.2.6 树构造”>“12.2.6.4 解析 HTML 内容中的标记的规则”> “12.2.6.4.7 “体内”插入模式”。

（在 HTML 5.2 中，同一部分的编号为8.2.5.4.7）。

向下滚动查看“标签名称为“textarea”的开始标签”

标记名称为“textarea”的开始标记
运行以下步骤：
1. 为标记插入 HTML 元素。
2. 如果下一个标记是 U+000A LINE FEED (LF) 字符标记，则忽略该标记并继续下一个标记。（为方便创作，忽略 textarea 元素开头的换行符。）
3. 将分词器切换到 RCDATA 状态。
...

该算法仅处理 LF 字符，因为 CR 字符处理较早。

（从历史上看，查看过时的 HTML 4.01 规范：
其第 17.7 章“TEXTAREA 元素”有一个示例显示 textarea 的文本内容从新行开始。 附录 B.3.1 换行符（信息性）解释了这种行为源自SGML。）

现在，在 HTML 5 中，结束标记之前的换行符</textarea>不会被忽略。

于 2018-04-02T02:24:42.340 回答
3

如果可能，将代码更改为将 textarea 预定义为 html，然后改写如下字符串：

HTML：

<textarea cols='10' rows='10' id='test'></textarea>

脚本：

document.getElementById('test').innerHTML = '\nhello\nbabe\n';

那应该保留空白。或者，您可以添加 css 规则：

textarea {
    white-space:pre;
    }

一个小提琴玩：http:
//jsfiddle.net/RFLwH/1/

更新：

OP 在 IE8 中测试，这不起作用 - 这似乎是此浏览器的限制/错误。如果您在顶部手动插入换行符，IE8 确实使用 CR+LF，但是当设置为编程时，浏览器会完全忽略它。

将此添加到 html 以进行测试： 

<span onclick="this.innerHTML = escape(document.getElementById('test').innerHTML);">
    Get textarea content
</span>

可以看到返回的字符串是：

 %0D%0Ahello%20babe%20

意味着 CR+LF 在那里（其他换行符被转换为空格 - 但在开头插入空格也无济于事）。我想您对此行为无能为力。浏览器已经过时（但不幸的是仍然被广泛使用，所以如果这是必要的，这对那些用户来说可能是一个问题）。

于 2013-03-20T16:50:25.147 回答
1

在第一个 "\n" 之前添加一个空格，如下所示：

<script type="text/javascript">
   document.write("<textarea cols='10' rows='10'>" + " \nhello\nbabe\n" + "</textarea>");
</script>

或者

<textarea cols='10' rows='10'> <!-- whitespace here -->
hello
babe
</textarea>

否则它将无法正常工作。

更新：稍后在您的服务器端，您可以通过执行删除第一个空格

$str = ltrim ($str,' ');

或者

$str2 = substr($str, 4);

如果是 PHP。

于 2013-03-20T16:47:08.077 回答
1

它应该\n\r在顶部： document.write("<textarea cols='10' rows='10'>" + "\n\rhello\nbabe\n" + "</textarea>");

jsbin

于 2014-05-29T18:00:17.290 回答
0

最后我完成了这个服务器端解决方案：

在将其输出到 textarea 之前，将前导（仅第一个！） nl 符号加倍：

if(str_startswith("\r\n",$value))
{
    $value = "\r\n".$value;             
}elseif(str_startswith("\n",$value))
{
    $value = "\n".$value;
}elseif(str_startswith("\r",$value))
{
    $value = "\r".$value;
}

function str_startswith($start, $string)
{
  if(mb_strlen($start)>mb_strlen($string))
    return FALSE;
  return (mb_substr($string, 0,mb_strlen($start))==$start);
}
于 2014-02-25T18:27:07.977 回答