Angular：在文本区域内显示文本区域字符计数答案

【问题标题】：Angular: Show Text Area Character Count INSIDE the textareaAngular：在文本区域内显示文本区域字符计数
【发布时间】：2020-03-21 17:43:50
【问题描述】：

Angular5：需要构建一个应用程序，其中必须显示 TextArea 字符数在 textarea 内，而不是在外。

找到多种显示字符数的方法，我可以做到，但是是否有可能在 TextArea inside TextArea 中显示该字符数？

代码： HTML 文件

<td>
<textarea pInputTextArea [(ngModel)]="value" (ngModelChange)="valueChange(value)" maxlength="1000"></textarea>
<span>{{remainingText}}</span>
 </td>

.ts 文件

 valueChange(value) {
  this.remainingText = 1000 - value;
 }

【问题讨论】：

你必须改变它： .. this.remainingText = 1000 - value.length; ...

标签： javascript angular typescript angular5 angular7

【解决方案1】：

您可以使用

将容器添加到文本区域

position: relative

然后将您的计数器放在与

相同的相对父级中

 position:absolute

并通过top 和right 属性控制位置。

<td>
<div class="textarea-wrapper">
<textarea pInputTextArea [(ngModel)]="value" (ngModelChange)="valueChange(value)" maxlength="1000"></textarea>
<span class="remaning">{{remainingText}}</span>
</div>
 </td>

在css中：

.textarea-wrapper {
   position:relative;
}
.remaning {
position:absolute;
bottom: 10px;
right:10px;
}

【讨论】：

你好#YahyaEssam：你可以分享任何演示，如何实现它
@Angelina 你好，请添加你的代码，让它在外面，我会告诉你如何让它在里面
无论如何都要将它包含在具有许多行数的表中，当表有 1 行时，它的显示效果很好，因为许多行没有显示
嗨@YahyaEssam 请帮助我的朋友阿米莉亚。stackoverflow.com/q/59468510/12590864

【解决方案2】：

所以你可以通过样式来实现这一点。

Stackblitz link

HTML

<textarea [(ngModel)]="desc" class="custom-textarea"></textarea>

<div class="count-div">
    <div *ngIf="desc.length" class="count-text" >{{desc.length}}</div>
</div>

CSS

.custom-textarea {
    outline: none;
    resize: none;
    border-right:0;
}

.count-div {
  height: 34px; 
  width: 20px;
  border: 1px solid rgb(169, 169, 169); 
  color: grey; 
  font-size: 14px; 
  border-left:0;
}

.count-text {
  margin-top:15px;
}

.display-flex {
  display: flex
}

【讨论】：

【解决方案3】：

一定是：

value.length

没有

value

【讨论】：