Angular 带字符数的文本区域：文本崩溃为字符数

Question

我的 Angular 项目中有一个文本区域，其框架（右下角）内部有一个字符数。当你插入文字时，文字最终会崩溃到字符数：charCrash.

我正在寻找一种方法来避免这种情况发生并允许文本区域在用户输入多于可见行数时滚动（现在显示大约 4 行）。因此，如果可能的话，滚动应该发生在字符数之上。

到目前为止，这是我的 html 代码：

<div class="container">
  <textarea class="form-control text-area" formControlName="textarea"></textarea>
  <div class="text-counter">0 / 100</div>
</div>

还有我的css：

.container {
  display: flex;
  position: absolute;
}

.text-area {
  position: relative;
  margin-top: 5px;
  height: 100px;
}

.text-counter {
  position: absolute;
  top: 90px;
  right: 10px;
}

非常感谢您的帮助！

Answer 1

您可以通过假装容器是 textarea 然后在容器内嵌入一个稍微小一些的 textarea 来解决这个问题。

<div class="container">
  <textarea class="form-control text-area" formControlName="textarea"></textarea>
  <div class="text-counter">0 / 100</div>
</div>

.container {
  display: flex;
  position: absolute;
  height: 100px;
  border: solid 1px black;
  padding-bottom: 20px;
}

.text-area {
  position: relative; 
  border: none;
  height: 80px;
}

.text-counter {
  position: absolute;
  bottom: 5px;
  right: 10px;
}

Angular 带字符数的文本区域：文本崩溃为字符数

Angular textarea with character count: text crashes into char num

html

textarea

angular