Javascript HTML文本区域忽略第一个新行字符，为什么？

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

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

document.write（“+”\nhello\nbabe\n“+”）；

渲染底部有一个新行的文本区域，但顶部没有新行

测试IE8、FF11、Safari 5.1、铬24

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

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

你好
宝贝

第一条新线路仍然缺失

我需要在顶部添加另一行，以便显示：

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

document.write（“+”\n\nhello\nbabe\n“+”）；

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

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

或

---

如果是PHP。

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

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

---

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

HTML:

这样可以保留空白。（可选）您可以添加css规则：

textarea {
    white-space:pre;
    }

可玩的小提琴：

更新：

在IE8中测试了OP，但这不起作用-这似乎是该浏览器的一个限制/缺陷。如果在顶部手动插入换行符，IE8实际上会使用CR+LF，但当设置为编程时，浏览器会完全忽略这一点

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

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

---

表示CR+LF在那里（其他换行符转换为空格-但在开头插入空格也没有帮助）。我想你对这种行为无能为力；浏览器已经过时（但不幸的是，它仍然被广泛使用，因此，如果这是必要的，这可能会成为这些用户的一个问题）。

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

要在将nl符号输出到textarea之前双行距（仅第一个！），请执行以下操作：

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

---

它应该是顶部的

\n\r

：

document.write（“+”\n\rhello\nbabe\n“+”）

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

在当前的HTML5生活标准中，它是“12.2解析HTML文档”>“12.2.6树构造”>“12.2.6.4解析HTML内容中标记的规则”>

（在HTML5.2中，同一节被编号）

向下滚动项“标记名为“textarea”的开始标记”

标记名为“textarea”的开始标记

运行以下步骤：

1.为令牌插入HTML元素。

2.如果下一个标记是U+000A换行符（LF）字符标记，则忽略该标记并转到下一个标记。（为了便于编写，将忽略textarea元素开头的换行。）

3.将标记器切换到RCDATA状态。


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

（历史上，研究过时的HTML 4.01规范：

Its的一个示例显示textarea的文本内容从新行开始。
（资料性）说明此类行为源自SGML。）

现在，在HTML 5中，
结束标记之前的换行符不会被忽略。
您是否尝试使用了
标记？\n“将不会被视为textarea值，但作为HTML换行符，脚本中的空白将以空格呈现第一行。这不好，textarea中的数据可以发送到服务器，然后保存到数据库中，并添加无人需要的空间。它不适用于IE8，但适用于Chrome 24、Safari和FF。我想这是IE8错误。@Marco Demaio-IE8可能也需要换行（
），因为windows相信新行“\n”是回车+换行（
）。你让我开心了。Textarea花了一个小时）这对我来说很有效。在script:s=s.replace（/^\n/，“
；”）中，它不适用于IE8，但适用于Chrome 24、Safari和FF。我猜是IE8病毒。是的，这并不奇怪。我对ie8做了一个测试（在本地，fiddle也不能在ie8中显示），然后手动在顶部插入一个换行符，取出文本并转义，以查看它包含了什么。它确实在/r/n处插入，但当从javascript设置它时，它完全忽略了它。我想这没什么关系：-/多么奇怪，但是对我来说，做
'\n\r'
比做
'\r\n'
更有效！

 == carriage return

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

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

textarea {
    white-space:pre;
    }

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

 %0D%0Ahello%20babe%20

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