placeholder在textarea中不起作用的主因是标签内含空格或换行导致浏览器视其为已有内容，且原生placeholder不支持换行符解析，属HTML规范行为；正确做法是清除标签内空白，并用white-space: pre-wrap等CSS配合data-placeholder模拟多行占位效果。
placeholder 属性在 <textarea> 中为什么不起作用？
它其实起作用——但仅限于纯文本提示，不支持换行、缩进或语法高亮。很多开发者误以为 placeholder 能像编辑器那样渲染带缩进的代码块，结果粘贴多行代码进去后发现换行丢失、缩进塌陷，甚至被浏览器自动转义。
根本原因是：placeholder 是纯字符串属性，HTML 解析器会忽略其中的 \n 和多个空格，只当普通空白处理；且它无法嵌入 <pre> 或 <code> 标签。
- ✅ 正确用法：
<textarea placeholder="console.log('hello');"></textarea> - ❌ 错误尝试：
<textarea placeholder="function test() {\n return true;\n}"></textarea>（换行会被压成空格） - ⚠️ 注意：部分旧版 Safari 甚至会把含单引号的字符串截断
如何让多行代码示例在编辑区“看起来像可编辑的模板”？
靠 placeholder 做不到，得用 value + CSS 模拟占位行为。核心思路是：初始时用真实内容填充 <textarea>，再通过样式和交互让它“看起来像 placeholder”，同时保留可编辑性与格式。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 用
white-space: pre-wrap保证换行和空格原样显示 - 用
color: #999和font-family: monospace模拟 placeholder 视觉 - 监听
focus事件：首次聚焦时清空内容并重置样式（避免用户误删后无法恢复） - 配合
data-placeholder自定义属性存原始模板，便于重置
示例 HTML：
<textarea
data-placeholder="function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('World');"
style="white-space: pre-wrap; color: #999; font-family: monospace;"
>function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('World');</textarea>
怎么区分用户输入和默认模板？避免清空后无法还原
不能只靠是否为空判断——用户可能真想留空。更可靠的方式是记录初始状态，并用 data- 属性绑定原始模板，在需要时一键还原。
- 初始化时读取
textarea.dataset.placeholder并设为value - 用
textarea.hasAttribute('data-initialized')标记是否已触发过首次聚焦 - 聚焦时若
value === dataset.placeholder，才清空并移除该标记 - 提供按钮调用
textarea.value = textarea.dataset.placeholder即可重载示例
这样既保留了“开箱即用”的引导感，又不会因一次误操作就丢失上下文。
移动端和无障碍访问要注意什么？
Android WebView 和 iOS Safari 对 textarea 的 placeholder 渲染差异大，而自定义方案更要小心：
- 不要用
aria-hidden="true"隐藏模板内容——屏幕阅读器会跳过整个区域 - 应添加
aria-label描述用途，例如aria-label="JavaScript 代码编辑区，点击开始输入" - 避免用
opacity: 0.5实现灰色文字——部分 TalkBack 会降低语音语速，造成误解 - 测试软键盘弹出后是否遮挡内容：iOS 下
scrollIntoView({ behavior: 'smooth' })在 focus 后加个setTimeout更稳
真正难的不是写出多漂亮的示例，而是让用户第一次点进去时，既看懂格式意图，又不怀疑自己删错了东西。
