angular - 当用户以 Angular 输入时动态计算单词

Question

我想统计单词数，因为用户在 textarea

中键入

如果他/她超过 100 个单词，则不应允许他/她打字。

我需要在他/她输入时动态显示字数

sample.component.ts

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

  }

这是我计算单词的功能

sample.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 代码
请指导我这样做。提前致谢

Answer 1

您应该使用 keydown事件和使用 ViewChild获取文本区域中的文本

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

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