如何为HTML textarea的placeholder设置部分文字加粗的格式化样式？

原生HTML的textarea元素的placeholder属性仅支持全局样式（如统一字体、颜色），无法直接为其中部分文本设置加粗等局部格式。要实现你需要的效果，最可靠的方式是通过模拟占位符元素来实现，具体步骤如下：

实现代码 #

HTML结构 #

用一个容器包裹textarea和模拟占位符的元素，模拟元素中可以直接使用<strong>标签设置加粗文本：

<div class="textarea-container">
  <textarea id="customTextarea" rows="3"></textarea>
  <div class="simulated-placeholder">
    <strong>I will</strong> do something I really good at
  </div>
</div>

CSS样式 #

设置容器为相对定位，让模拟占位符绝对定位在textarea上方，同时匹配原生占位符的视觉样式：

.textarea-container {
  position: relative;
  display: inline-block;
}

#customTextarea {
  padding: 8px;
  font-size: 16px;
  font-family: system-ui, sans-serif;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.simulated-placeholder {
  position: absolute;
  top: 8px;
  left: 8px;
  color: #999;
  pointer-events: none; /* 防止干扰输入 */
  font-size: 16px;
  font-family: system-ui, sans-serif;
}

JavaScript逻辑 #

监听textarea的输入事件，根据内容是否为空切换模拟占位符的显示状态：

const textarea = document.getElementById('customTextarea');
const placeholder = document.querySelector('.simulated-placeholder');

// 输入时切换占位符显示
textarea.addEventListener('input', () => {
  placeholder.style.display = textarea.value.trim() ? 'none' : 'block';
});

// 页面加载时初始化状态
window.addEventListener('load', () => {
  placeholder.style.display = textarea.value.trim() ? 'none' : 'block';
});

注意事项 #

1. 确保模拟占位符的padding、font-size、font-family等样式与textarea完全一致，避免视觉错位；
2. 如果需要处理textarea的聚焦状态，可以通过CSS的:focus伪类为模拟占位符添加对应样式（比如调整颜色）；
3. 这种方式不会影响表单提交逻辑，用户输入的内容仍存储在textarea元素中，模拟占位符仅作视觉展示。

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