Angular: 在文本区域内显示文本区域字符数
Angular: Show Text Area Character Count INSIDE the textarea
Angular5: 需要构建一个应用程序,其中必须显示 TextArea 字符数 在 textarea 内部, 不在外部。
找到了多种显示字符数的方法,我能够做到这一点,但是是否有可能在 TextArea 内部 中显示该字符数?
代码:
HTML 文件
<td>
<textarea pInputTextArea [(ngModel)]="value" (ngModelChange)="valueChange(value)" maxlength="1000"></textarea>
<span>{{remainingText}}</span>
</td>
.ts 文件
valueChange(value) {
this.remainingText = 1000 - value;
}
您可以使用
将容器添加到文本区域
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;
}
必须是:
value.length
没有
value
所以你可以用样式来实现。
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
}
Angular5: 需要构建一个应用程序,其中必须显示 TextArea 字符数 在 textarea 内部, 不在外部。
找到了多种显示字符数的方法,我能够做到这一点,但是是否有可能在 TextArea 内部 中显示该字符数?
代码: HTML 文件
<td>
<textarea pInputTextArea [(ngModel)]="value" (ngModelChange)="valueChange(value)" maxlength="1000"></textarea>
<span>{{remainingText}}</span>
</td>
.ts 文件
valueChange(value) {
this.remainingText = 1000 - value;
}
您可以使用
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;
}
必须是:
value.length
没有
value
所以你可以用样式来实现。
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
}