HTML textarea 忽略第一个换行符，为什么？

Question

你能解释一下为什么吗：

<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>");

Answer 1

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

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

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


 == carriage return

Answer 2

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

在当前的 HTML 5 生活标准中是“12.2 解析 HTML 文档”>“12.2.6 树构造”>“12.2.6.4 解析 HTML 内容中标记的规则”>"12.2.6.4.7 The "in body" insertion mode".

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

向下滚动以找到“标签名称为“textarea”的起始标签”

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

该算法只处理 LF 字符，因为 CR 字符是 handled earlier。

（从历史上看，查看过时的 HTML 4.01 规范：
它的Chapter 17.7 "The TEXTAREA element" 有一个示例，显示文本区域的文本内容从新行开始。 Appendix B.3.1 Line breaks（信息性）解释说这种行为源自 SGML。）

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

Answer 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/

更新：

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

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

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

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

 %0D%0Ahello%20babe%20

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

Answer 4

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

Answer 5

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

jsbin

Answer 6

我终于完成了这个服务器端解决方案：

在 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);
}