Question

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

找到了多种显示字符数的方法，我能够做到这一点，但是有没有办法在TextArea内部显示该字符COUNT ？

代码： HTML文件

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

.ts文件

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

Answer 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;
}

Answer 2

它必须是：

value.length

不是

value

Answer 3

所以您可以使用样式来实现。

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 个答案: