textarea 的 placeholder 仅支持纯文本且不解析换行符，是 HTML5 规范限定行为；需多行提示时应使用 JS 遮罩层模拟，不可用 contenteditable 替代；设置/读取须用 .placeholder 属性而非 getAttribute；样式须用 ::placeholder 伪元素及各浏览器前缀；placeholder 不参与表单提交，也不等于默认值。
textarea 的 placeholder 属性只支持纯文本，不解析换行符
你在 placeholder 里写 "第一行\n第二行" 或直接回车换行，浏览器都会把它当空格或截断——这不是 bug，是 HTML5 规范明确限定的行为。原生 placeholder 本质是单行视觉占位，不是富文本容器。
常见错误现象：开发者用 JS 动态赋值 textarea.placeholder = "用户名\n密码"，结果页面只显示“用户名 密码”或仅首行；或者在 HTML 中硬换行，DevTools 里能看到换行符，但渲染不出来。
- 真正需要多行提示时，必须用 JS + 绝对定位遮罩层模拟（监听
input和focus事件控制显隐） - 若只是举例格式（如“标题↵正文↵标签”），更稳妥的做法是把说明文字放在
textarea上方，用<label>或独立<p>标签呈现 - 千万别用
contenteditable替代textarea——表单提交、移动端光标、无障碍支持全会出问题
设置和读取 placeholder 值要用 JavaScript 的 .placeholder 属性
DOM 操作中，不能通过 getAttribute('placeholder') 获取当前值，因为该属性被映射为元素的可读写属性 .placeholder，而非原始 HTML 属性。
正确写法：
立即学习“前端免费学习笔记（深入）”；
const ta = document.getElementById('myTextarea');
// 设置
ta.placeholder = '请输入反馈意见（限200字）';
// 读取
console.log(ta.placeholder); // → 字符串值
注意：IE10+、Chrome、Firefox、Safari 都支持，但 IE9 及更早版本完全不识别 textarea 的 placeholder，需降级处理（比如用 value + 聚焦清空逻辑）。
样式定制必须用 ::placeholder 伪元素及各浏览器前缀
默认浅灰色提示文字可读性弱，尤其在深色背景或小字号下容易被忽略。但直接写 textarea { color: #999; } 不生效——它只影响用户输入内容，不影响 placeholder。
必须用伪元素，且要覆盖主流引擎：
textarea::placeholder {
color: #777;
font-size: 0.95em;
}
textarea::-webkit-input-placeholder { color: #777; }
textarea::-moz-placeholder { color: #777; }
textarea:-ms-input-placeholder { color: #777; }
关键细节：
- 不要给 placeholder 加
font-weight: bold或高对比色——它本应是“弱提示”，太醒目反而干扰主输入 - 移动端 iOS Safari 对
font-size < 14px或line-height不匹配敏感，可能压扁文字 -
::placeholder不支持动画（如opacity过渡），加了也无效
placeholder 不是默认值，也不参与表单提交
这是最常被混淆的一点：placeholder="示例内容" 完全不会让表单提交时带上这个字符串，也不会让 textarea.value 初始为该值。
如果你需要预填内容，必须用 value 或 defaultValue：
<textarea value="已加载的草稿内容"></textarea>
而 placeholder 的唯一职责，是在字段为空且未聚焦时，轻量提示用户“这里该填什么”。它没有语义权重，屏幕阅读器不一定读出，也不能替代 <label>。
真正容易被忽略的是：当后端返回数据填充表单时，如果只改了 value 却没同步清除 placeholder，用户看到“已填内容”叠加“请输入……”的双重提示，体验反而变差。
