HTML中textarea占位符 HTML中textarea标签的placeholder换行

textarea 的 placeholder 不支持换行是 HTML 规范行为，非 bug；需用 JS 模拟：绝对定位遮罩层 + pre-line 换行 + 同步显隐与位置。

textarea 的 placeholder 不支持换行

HTML 标准里 placeholder 属性在 textarea 上**不解析换行符**，无论你写 n、 还是直接回车，浏览器都会把它当空格或直接截断。这不是 bug，是规范行为——placeholder 本质是纯文本提示，不是富文本容器。

想实现多行 placeholder，只能用 JS 模拟

真实可行的方案是：隐藏原生 placeholder，用一个绝对定位的 <div> 或 <span> 叠在 textarea 上，监听 focus/input 事件控制显隐。关键点：

• textarea 设置 position: relative，为遮罩层提供定位上下文
• 遮罩层用 white-space: pre-line 保留换行，字体、大小、颜色需和 textarea 内容一致
• 必须监听 input（不只是 focus），否则用户粘贴内容后遮罩不消失
• 注意 resize 和滚动时的重绘，遮罩层要同步更新位置

示例片段：

<div class="textarea-wrapper">  <textarea id="myTextarea"></textarea>  <div class="placeholder" aria-hidden="true">第一行<br>第二行</div></div>

再配 CSS 和 JS 控制显隐逻辑。

别用 contenteditable + div 代替 textarea

有人想绕过限制，用 div[contenteditable] 模拟可编辑区域并自由写换行 placeholder。这会引入一堆问题：

• 表单提交时不会自动包含该 div 的值，需额外 JS 同步到隐藏 input
• 移动端光标定位、键盘兼容性差（尤其 iOS 中文输入法）
• 无法继承 textarea 原生的 rows/cols、自动换行、滚动行为
• 无障碍支持弱，role="textbox" 也难完全对齐语义

真正需要多行提示时，考虑设计替代方案

如果 placeholder 换行只是为了说明格式或举例，更稳妥的做法是：

立即学习“前端免费学习笔记（深入）”；

• 把说明文字放在 textarea 上方，用 <label> 或独立段落，加粗或小号字体区分
• 用 title 属性做 hover 提示（虽然体验弱，但无兼容风险）
• 首次聚焦时弹出轻量 tooltip（用 dataset 存提示文案，JS 渲染）

原生 placeholder 的定位就是“临时视觉占位”，不是文档说明区。强行塞进多行，往往意味着提示信息已经超出了占位符该承担的职责。