javascript - Angular：在文字區域內顯示文字區域字元數

Angular5：需要建立一個應用程式，其中必須在文字區域內顯示文字區域的字元數 在文字區域內， 而不是外部。

找到多種顯示字元數的方法，我可以做到，但有沒有可能以某種方式在文字區域 內部 顯示該字元數？

代碼：HTML 文件

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

.ts 檔案

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

答案＃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;
}

答案＃2

所以你可以透過樣式來達成這個目標。

Stackblitz 連結

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
}