Textarea占位符居中时光标起始位置不符合预期的问题求助

要实现类似Instagram故事的效果——占位符居中显示，同时光标从占位符的起始位置（即居中文本的开头）开始，可通过以下两种方案解决：

方案1：纯CSS实现（推荐） #

通过::placeholder伪元素单独控制占位符的对齐，同时设置textarea的文本对齐为居中，让光标自然匹配占位符的起始位置：

<textarea class="center-placeholder" placeholder="Type Here..."></textarea>

.center-placeholder {
  width: 350px; /* 根据需求自定义宽度 */
  height: 120px; /* 根据需求自定义高度 */
  padding: 10px;
  font-size: 16px;
  text-align: center; /* 让输入内容和光标居中，与占位符位置匹配 */
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 兼容部分浏览器，强制占位符居中 */
.center-placeholder::placeholder {
  text-align: center;
  opacity: 0.6; /* 可选：调整占位符透明度 */
}

如果之前设置后光标位置异常，检查是否有其他CSS样式（如direction、text-indent、自定义padding）冲突，可尝试重置textarea的默认样式来排除干扰。

方案2：模拟占位符（解决特殊样式冲突） #

若纯CSS方案因浏览器兼容性或现有样式冲突无法生效，可用模拟占位符的方式精确控制位置：

<div class="textarea-container">
  <textarea class="custom-textarea"></textarea>
  <span class="fake-placeholder">Type Here...</span>
</div>

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

.custom-textarea {
  width: 350px;
  height: 120px;
  padding: 10px;
  font-size: 16px;
  text-align: center; /* 保证光标和输入内容居中 */
  border: 1px solid #ddd;
  border-radius: 4px;
}

.fake-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* 不干扰textarea的焦点事件 */
  color: #999;
  font-size: 16px;
}

/* 当textarea获得焦点或有内容时，隐藏模拟占位符 */
.custom-textarea:focus + .fake-placeholder,
.custom-textarea:not(:placeholder-shown) + .fake-placeholder {
  display: none;
}

这种方式通过绝对定位的span模拟占位符，确保它居中显示，同时textarea自身保持文本居中，光标自然落在占位符的起始位置，完全不受浏览器默认样式影响。

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