时间戳

首页 > 解决方案 > 当用户输入角度时动态计数单词

angular - 当用户输入角度时动态计数单词

问题描述

  1. 当用户在 textarea 中输入时，我想计算字数
  2. 如果他/她超过 100 个单词，则不应允许他/她打字。
  3. 我需要在他/她键入时动态显示字数

样本.component.ts

 wordCounter(){
    this.wordCount = this.text ? this.text.split(/\s+/)  : 0;
    this.words=this.wordCount ? this.wordCount.length:0;

  }

这是我计算单词的功能

示例.component.html

<textarea [(ngModel)]="text" ng-change="wordCounter()" id="wmd-input" name="post-text" class="wmd-input s-input bar0 js-post-body-field processed" data-post-type-id="2" cols="92" rows="15" tabindex="101" data-min-length="" oncopy="return false;" onpaste="return false;" oncut="return false;"></textarea>

<div>Words:<span id="wordCount">{{ words }}</span></div>

这是我的 html 代码请指导我这样做。提前致谢

标签： angulartypescript

解决方案

您应该使用keydownevent 和 useViewChild来获取文本区域中的文本

更新：如果你只想限制 100 字，你可以添加[attr.disabled]="words >100 ? '' : null"禁用 textarea

HTML

 <textarea [attr.disabled]="words >100 ? '' : null" (keydown)="wordCounter()" #text id="wmd-input" name="post-text" 
class="wmd-input s-input bar0 js-post-body-field processed" data-post-type-id="2" cols="92" rows="15" tabindex="101" data-min-length="" oncopy="return false;" onpaste="return false;" oncut="return false;"></textarea>

    <div>Words:<span id="wordCount">{{ words }}</span></div>

TS

export class AppComponent {
  wordCount: any;

  @ViewChild("text") text: ElementRef;
  words: any;
  wordCounter() {
    //alert(this.text.nativeElement.value)
    this.wordCount = this.text ? this.text.nativeElement.value.split(/\s+/) : 0;
    this.words = this.wordCount ? this.wordCount.length : 0;
  }
}

演示https://stackblitz.com/edit/angular-word-count

推荐阅读