Question

我正在尝试在输入元素上实现Angular 2中的“字符倒计时”，类似于Twitter强制执行140个字符限制并实时更新用户。我想向用户显示他们实时剩下多少个字符，因此当用户键入输入时，字符倒计时会更新，并且最终会在用户继续输入时达到“0”。

我理解如何在输入元素上强制执行“maxlength”，但我正在请求如何实现倒计时的指导。这是对Angular 1帖子的类似请求：angularjs text area character counter

这里是否需要jQuery，或者通过绑定可以使用“Angular 2 way”吗？

Answer 1

您可以为它创建一个管道：

import { Pipe, PipeTransform } from '@angular/core';


@Pipe({
    name: 'countdown',
    pure: true
})

export class CountdownPipe implements PipeTransform {
  transform(text: string, args: number) {
    let maxLength = args || 0;
    let length = text.length;

    return (maxLength - length);
  }
}

您的HTML

<label> {{myText | countdown}} characters remaining</label>

这是一个有效的人：http://plnkr.co/edit/mtGpkhLW77Jimtdtymbh?p=preview

Answer 2

您可以将 [（ngModel）] 和（按键）绑定到输入：

@Component({
  selector: 'my-app',
  template: `<input [(ngModel)]="currentText" (keypress)="changed()">
      chars left : {{ charsLeft }}
  `
})
export class AppComponent {
  public currentText: string = '';
  public charsLeft: string = 140;

  changed() {
    this.charsLeft = 140 - this.currentText.length;
  }
}

工作人员：http://plnkr.co/edit/ET38TnbDLdKuHEQ9e2cb?p=preview

Answer 3

有很多方法可以做到这一点。您也可以使用管道来执行此操作。但在这里，我将向您展示如何在组件中完成它。

这是 angular2 way 。

工作演示：https://plnkr.co/edit/QTn81qKBAi0mD15b94Hs?p=preview

@Component({
  selector: 'my-app',
  template: `

    <label><b>Tweet</b></label>
     <bR>
    <textarea cols=40 rows=3  (keyup)="count(tweetmsg)"    
               [(ngModel)]="tweetmsg" 
              >
    </textarea>  {{characterleft}} charcter(s) left

  `,

})
export class AppComponent {
  maxlength=20;
  characterleft=this.maxlength;

  count(msg){
    if(this.maxlength>=msg.length){
      this.characterleft=(this.maxlength)-(msg.length);
    }
    else{
       this.tweetmsg = msg.substr(0, msg.length - 1);
       console.log(msg);
    }
  }
}

Answer 4

<small class="form-text text-muted"><code>{{2000- incidentDescription.value.length}} </code> Remaining characters</small>
    <textarea id="incidentDesc" #incidentDescription class="form-control" formControlName="incidentDesc" maxLength="2000"></textarea>

添加对控件#incidentDescription的引用。然后将maxLenght设置为控件，然后在代码块中进行数学运算 {{2000- incidentDescription.value.length}}

Answer 5

您好尝试使用angular指令，如下所示：

import { Directive, HostListener, ElementRef, Input, ViewChild, } from '@angular/core';
import { NgControl } from '@angular/forms';
/**
* For Showing the character left.
*/
@Directive({
  selector: '[characterLeft]',
})
export class CharacterLeftDirective {

  @Input() maxLength: string;
  public textValue: string;
  constructor(private elRef: ElementRef, private _ngControl: NgControl) {
  }
  private _showMessage(maxLength, textLength): void {
    this.elRef.nativeElement.nextElementSibling.innerHTML = maxLength - textLength + ' Character(s) left'
  }
  @HostListener('keyup', ['$event']) toDecimal($event: any) {
    $event.preventDefault();
    const value: any = $event.target.value;
    if (value) {
      this._showMessage(this.maxLength, value.length);

    } else {
      this._showMessage(this.maxLength, 0);
    }
  }
}

在HTML中

<textarea formControlName="message_content" class="form-control mb-2" rows="8" placeholder=""  [maxLength]="160" characterLeft maxlength="160"></textarea>
                    <div class="text-danger"></div>

Angular 2 Twitter字符倒计时输入

5 个答案: