HTML textarea忽略第一个新行字符,为什么？

Question

你能解释一下为什么吗:

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

渲染一个textarea底部有一个新行,但顶部没有新行？

测试了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>");

Answer 1

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

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

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


 == carriage return

Answer 2

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

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

（在 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 章“The TEXTAREA 元素”有一个示例，显示 textarea 的文本内容从新行开始。 附录 B.3.1 换行符（信息性）解释了这种行为源自SGML。）

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

Answer 3

在第一个“\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。