Angular textarea带字符计数时文字重叠及滚动需求如何解决？

解决方案 #

你遇到的重叠问题根源是绝对定位的计数器浮在了textarea的输入区域上方，且textarea没有给底部预留计数器的展示空间，按以下修改CSS即可实现需求：

调整后CSS代码

.container {
  position: relative;
  /* 若你原本需要容器为绝对定位，可保留position: absolute属性 */
}

.text-area {
  margin-top: 5px;
  height: 100px;
  box-sizing: border-box; /* 确保padding不会撑大textarea的总高度 */
  padding-bottom: 22px; /* 底部预留出计数器的展示空间，可根据计数器字号调整数值 */
  overflow-y: auto; /* 内容超出可视高度后自动出现滚动条 */
}

.text-counter {
  position: absolute;
  bottom: 8px; /* 改为bottom定位适配更稳定，不需要手动计算top偏移值 */
  right: 10px;
  font-size: 12px;
  color: #666;
}

改动说明

1. 新增的padding-bottom为计数器预留了专属展示区域，输入的文本最高只会展示到padding区域的上方，完全不会和计数器重叠
2. box-sizing: border-box保证textarea依然保持你原本设置的100px高度，不会被padding撑大
3. 滚动区域仅出现在textarea的文本输入区，刚好位于计数器上方，符合你的需求
4. 计数器改为bottom定位，后续如果调整textarea高度，不需要同步修改计数器的偏移值，维护更方便

可选计数逻辑补充（Angular环境）

如果你还需要实现动态计数，可以直接把计数器的内容绑定表单值的长度：

<div class="text-counter">{{yourForm.get('textarea').value?.length || 0}} / 100</div>

把yourForm替换为你实际的表单组变量名即可。

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