HTML中textarea占位符 HTML中textarea标签placeholder换行
textarea 的 placeholder 不支持换行是 HTML 规范行为，非 bug；需用 JS 模拟：绝对定位遮罩层 + pre-line 换行 + 同步显隐与位置。
免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈
textarea 的 placeholder 不支持换行
很多开发者都遇到过这个困惑：为什么在 textarea 标签的 placeholder 属性里，无论你写 \n、
其实，这并非浏览器的 bug，而是 HTML 规范有意为之。placeholder 属性的设计初衷，是提供一个简洁的、单行的文本提示，它本质上被当作纯文本处理，而不是一个可以容纳富文本或复杂排版的容器。所以，规范明确不解析其中的换行符。
想实现多行 placeholder，只能用 JS 模拟
那么，如果设计上确实需要多行提示，有没有办法呢？答案是肯定的，但必须借助 Ja vaScript 来“模拟”这个效果。核心思路是：隐藏原生的 placeholder，然后自己造一个视觉效果相同的元素叠上去。
具体怎么做？业内成熟的方案是使用一个绝对定位的 或 作为“遮罩层”，覆盖在 textarea 之上。这个遮罩层的内容可以自由换行，并通过监听文本框的事件来控制它的显示和隐藏。
这里有几个技术关键点，缺一不可：
- 定位上下文：给外层的
textarea容器设置position: relative，这样内部的绝对定位遮罩层才能以它为基准进行定位。 - 样式同步：遮罩层的字体、大小、颜色、内边距等样式，必须和
textarea的内容区域完全一致，否则会“穿帮”。 - 换行显示：通过 CSS 属性
white-space: pre-line，可以让遮罩层内的 - 事件监听：除了监听
focus（聚焦）事件让遮罩层消失，必须还要监听input事件。这是为了防止用户通过粘贴等方式快速填入内容后，遮罩层还顽固地留在那里。 - 动态同步：如果
textarea允许用户拖拽调整大小（resize），或者内容过多出现滚动条，别忘了同步更新遮罩层的位置和尺寸，确保视觉对齐。
来看一个简单的实现片段：
剩下的工作，就是为这个结构编写配套的 CSS 样式和用于控制显隐的 Ja vaScript 逻辑了。
别用 contenteditable + div 代替 textarea
面对这个限制，另一个看似“聪明”的想法是：干脆不用 textarea 了，用一个设置了 contenteditable="true" 的 来模拟可编辑区域，这样不就能随意写换行提示了吗？
但经验表明，这个方案往往是“才出虎xue，又入狼窝”，会引入更多棘手的问题：
- 表单集成困难：
的内容不会在表单提交时自动包含，你必须额外写 Ja vaScript 将其值同步到一个隐藏的或