HTML/CSS新手求教：如何实现textarea始终显示的占位符效果？

针对你的需求，推荐用**CSS背景SVG+background-attachment: local**的方案，无需额外DOM元素，高效兼容滚动：

核心思路 #

将引导文本转为SVG作为textarea的背景，通过background-attachment: local让背景随textarea滚动同步移动，用户输入的内容会覆盖在淡色背景文本之上，完美解决原生占位符消失、滚动不兼容的问题。

具体实现 #

1. 基础HTML结构 #

<textarea id="guideTextarea" placeholder="" spellcheck="false"></textarea>

（原生placeholder留空，避免冲突）

2. CSS样式设置 #

#guideTextarea {
  width: 100%;
  height: 240px;
  padding: 12px;
  font: 16px/1.5 "Arial", sans-serif; /* 字体和行高要和SVG内一致 */
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  color: #333; /* 用户输入文本颜色 */
  /* 核心背景设置 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'%3E%3Ctext x='12px' y='28px' font-family='Arial' font-size='16px' line-height='1.5' fill='%23f0f0f0' white-space='pre-wrap'%3E这是你的引导文本示例
第二行引导内容，支持自动换行
第三行可以继续添加更多引导文字%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-attachment: local; /* 背景随滚动同步 */
  background-position: top 12px left 12px; /* 和padding值对应，保证对齐 */
}

3. 动态修改引导文本（可选） #

如果需要动态切换引导内容，用JS生成SVG的URL即可：

function setGuideText(textarea, guideText) {
  // 转义SVG特殊字符
  const escapedText = guideText.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  // 生成SVG内容
  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><text x='12px' y='28px' font-family='Arial' font-size='16px' line-height='1.5' fill='#f0f0f0' white-space='pre-wrap'>${escapedText}</text></svg>`;
  // 转成URL编码
  const svgUrl = `data:image/svg+xml,${encodeURIComponent(svg)}`;
  // 设置背景
  textarea.style.backgroundImage = `url("${svgUrl}")`;
}

// 使用示例
const textarea = document.getElementById('guideTextarea');
setGuideText(textarea, "新的引导文本\n第二行内容\n第三行测试");

关键细节 #

• 确保textarea的字体、行高、padding和SVG内的文本属性完全一致，避免错位
• background-attachment: local是核心，它让背景跟随textarea的滚动区域移动，而非固定在视口
• SVG文本用淡灰色（如#f0f0f0），和用户输入的深色形成区分，不干扰输入

内容的提问来源于stack exchange，提问作者wheatwhole