textarea滚动时内容覆盖placeholder问题的修复方案咨询

问题根因 #

占位符被textarea滚动内容遮挡，是三个配置遗漏导致的：

1. 现有浮动标签样式仅适配了input元素，未覆盖textarea，textarea有内容/聚焦时标签不会上浮
2. textarea未预留上方空间给上浮后的标签，内容滚动时会顶到标签区域
3. 父容器未设置相对定位，标签的绝对定位没有正确的参照基准

修复后代码 #

CSS部分

/* 父容器添加相对定位，作为label的定位参照 */
.form-label-group {
  position: relative;
}

.input-control-placeholder {
  position: absolute;
  top: 0;
  padding: 7px 0 0 13px;
  color: #999ea4;
  /* 加高z-index确保标签始终显示在最上层，不会被内容遮挡 */
  z-index: 2;
  /* 可选：添加过渡动画，标签上浮效果更顺滑 */
  transition: all 0.2s ease;
}

/* 选择器新增textarea适配，同时移除col-12限制兼容你现有col-8的结构 */
.form-label-group input:not(:placeholder-shown) ~ label,
.form-label-group input:focus ~ label,
.form-label-group textarea:not(:placeholder-shown) ~ label,
.form-label-group textarea:focus ~ label {
  padding-top: calc(var(--input-padding-y) / 3);
  padding-bottom: calc(var(--input-padding-y) / 3);
  font-size: 11px;
  color: #999ea4;
  padding-left: 7px !important;
}

/* 给textarea添加上内边距，预留浮动标签的显示空间，避免内容滚动到标签区域 */
textarea.input-control {
  padding-top: 28px !important;
  /* 如果你项目有定义--input-padding-y全局变量，也可以用计算值：calc(var(--input-padding-y) + 12px) */
}

HTML部分

仅需按需给textarea添加行数属性即可，原有结构不用修改：

<div class="form-label-group col-8 pl-1 pr-1">
  <textarea 
    type="text" 
    class="e-input input-control" 
    formControlName="address" 
    id="address" 
    placeholder="address"
    rows="4"
  ></textarea>
  <label class="input-control-placeholder" for="address">Address</label>
</div>

最终效果 #

修改后只要textarea有输入内容或者处于聚焦状态，标签就会自动上浮到左上角固定，输入内容从标签下方开始展示，滚动时不会遮挡标签，完全符合需求。

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