通过innerHTML写入页面，textarea行首的换行符丢失

最新推荐文章于 2021-08-22 09:47:23 发布

chensi7776

最新推荐文章于 2021-08-22 09:47:23 发布

阅读量384

点赞数

原文链接：https://my.oschina.net/cdt/blog/1800466

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>)</title>
<script>
var a = "<textarea>&#10;&#10;sdf</textarea>"
function changeLink(){
    document.getElementById('myAnchor').innerHTML=a;
}
</script>
</head>
<body>
 <input type="button" onclick="changeLink()" value="修改">
<div id="myAnchor" ></div>
 
</body>
</html>

运行结果是只会换一行，最初以为是innerHTML的缘故，后来才发现这是在HTML 5规范中指定的，html在渲染textarea控件的标准就是如此。

解决方案：手动在前面加一行换行。

参考链接：https://html.spec.whatwg.org/multipage/parsing.html#parsing-main-inbody

A start tag whose tag name is "textarea"
Run these steps:
1. Insert an HTML element for the token.
2. If the next token is a U+000A LINE FEED (LF) character token, then ignore that token and move on to the next one. (Newlines at the start of textarea elements are ignored as an authoring convenience.)
3. Switch the tokenizer to the RCDATA state.
...

转载于:https://my.oschina.net/cdt/blog/1800466