如何在HTML textarea文本域内部强制实现换行效果？

原有写法失效原因 #

你之前尝试的\n、\r\n、<br>不生效，核心原因有两个：

• textarea是纯文本输入控件，不会解析任何HTML标签，写在内容里的<br>只会被当成普通字符串展示，完全不会触发换行。
• 直接写在HTML源码里的\n、\r\n是两个普通字符（反斜杠+字母n/反斜杠+字母r+字母n），不会被HTML解析器识别为换行符——\n是JavaScript等编程语言里的换行转义写法，不是HTML支持的转义语法，也不存在类似 的HTML实体字符能实现textarea内的换行。

正确实现写法 #

分两种使用场景：

静态编写HTML时 #

直接在<textarea>标签内部输入真实的回车即可，不需要加任何特殊标记，示例代码：

<textarea>bye
hello again
I'm here
</textarea>

上述代码渲染后直接就是你预期的三行换行效果。

通过JavaScript动态赋值时 #

如果是用JS动态给textarea设置内容，才需要用\n作为换行标记，示例代码：

const textareaEl = document.querySelector('textarea')
textareaEl.value = 'bye\nhello again\nI\'m here'

此时JS会把代码里的\n解析为真实的换行符，textarea可以正确识别并渲染换行。

注意：不要给textarea内容加任何HTML标签，不管是静态编写还是动态赋值，textarea只会把所有输入内容当纯文本展示，标签不会被解析。

内容的提问来源于stack exchange，提问作者Nikolas Trapp