HTML textarea的placeholder换行问题？通过属性模拟实现技巧-html教程-PHP中文网

原生 textarea 的 placeholder 不支持换行符解析，因 html 规范将其定义为单行简短提示，所有换行符均被静默丢弃；跨浏览器伪元素方案存在兼容性与可访问性问题；推荐使用带 white-space: pre-line 的绝对定位遮罩层替代。

html textarea的placeholder换行问题？通过属性模拟实现技巧

原生 textarea 的 placeholder 属性**不支持换行符解析**，无论你用 \n、还是直接回车，浏览器都会忽略或转为空格——这不是 bug，是 HTML 规范明确限定的行为。

W3C 明确将 placeholder 定义为“单行简短提示”，其值被当作纯文本字符串处理，不经过 HTML 解析或 CSS 白空间渲染。所有换行控制符（包括 \n、\r\n、）在标准实现中均被静默丢弃或折叠。

有人尝试用 CSS 伪元素注入换行内容，例如：

::-webkit-input-placeholder:before {
  content: "第一行\A第二行";
  display: block;
}

这看似可行，但实际踩坑密集：

\A 只在 WebKit（Chrome/Safari）的 ::before 中部分生效，Firefox 的 ::-moz-placeholder:before 不支持 display: block 或 \A
IE/Edge 18– 用 :-ms-input-placeholder 时，:before 根本不触发
伪元素无法继承 textarea 的字体大小、行高、padding，视觉错位严重
用户聚焦后 placeholder 消失逻辑失控，需额外 JS 同步显隐，反而更重

稳定、无障碍友好、可精准控制位置的方案，是用绝对定位的 div 模拟 placeholder，并与 textarea 状态联动：

textarea 外层加 position: relative，作为遮罩层定位上下文
遮罩 div 设置 white-space: pre-line 保留换行，同时匹配 font、color、padding 和 line-height
必须监听 input 事件（不只是 focus），否则粘贴内容后遮罩不消失
若 textarea 支持 resize，需在 resize 和 scroll 时同步更新遮罩层 top/left
给遮罩层加 aria-hidden="true"，避免屏幕阅读器重复读取

示例关键片段：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

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

CSS 中确保 .placeholder 使用 pre-line 并与 textarea 内边距对齐。

如果 placeholder 换行只是为了说明格式、举例或强调规则，多数情况下，它已经超出了占位符的职责边界：

把说明文字放在 textarea 上方，用 <label></label> 或独立 <p></p>，加 font-size: 0.875em 和 color: #666 区分
用 title 属性做 hover 提示（虽然移动端无效，但零 JS、全兼容）
首次 focus 时用轻量 tooltip 弹出，文案存在 data-placeholder-tip 里，JS 动态渲染