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

如果可能，请更改代码以将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，但是当设置为programmatic时，浏览器会完全忽略它。

将此添加到html进行测试：

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

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

 %0D%0Ahello%20babe%20

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

Answer 3

回答问题＆＃34;为什么＆＃34;。这在HTML 5规范的章节中指定，该章节描述了如何从HTML文档中找到的标记创建DOM树。

在当前的HTML 5生活标准中，它是＆＃34; 12.2解析HTML文档＆＃34; ＆GT; ＆＃34; 12.2.6树木结构＆＃34; ＆GT; ＆＃34; 12.2.6.4解析HTML内容中令牌的规则＆＃34; ＆GT; "12.2.6.4.7 The "in body" insertion mode"

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

向下滚动查看项目＆＃34;标签名称为＆＃34; textarea＆＃34;＆＃34;

的开始标记

  

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

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

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

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

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