Question

我是新手，我想实现的目标是

当我们在文本区域中输入一些文本时，标签中的字符将增加
按退格键时，计数器应减少。
如果用户尝试输入的字符多于指定字符，则计数器应显示0，并且用户不能输入任何内容
如果按下Backspace键，则应在文本区域显示字符数

在我的HTML中，我有：

<div class="col-sm-12 nopadding">
  <mat-form-field class="col-sm-12 nopadding">
    <textarea 
      matInput 
      placeholder="Role" 
      (keydown)="CounterMax(800,$event)" 
      [(ngModel)]="txtRole" 
      aria-label="Role">
    </textarea>
  </mat-form-field>
  <label class="nopadding clrlbl">
    Minimum character: {{lblRole}}
  </label>
  <br/>
</div>

在我的ts文件中，我具有此功能

lblRole: number = 800;
CounterMax(count, event) {
  var data = event.target.value.length;
  if (data >= count) {
    this.lblRole = 0;
    return false;
  } else {
    return true;
  }
}

不知何故，我设法增加了计数器，并防止用户一次输入否。字符数超过800，但是我不知道如何处理退格键并减少计数器。您能帮我吗？

Answer 1

我并没有真正理解此要求的原理：

如果用户尝试输入的字符多于指定字符，则计数器应显示0，并且用户不能输入任何内容

我认为更好的UX是向用户{{role.length}}/{{maxChars}}

显示

但是除此之外，只需使用[maxlength]作为属性绑定语法就可以实现所有目的。

尝试一下：

<div class="col-sm-12 nopadding">
  <textarea 
    placeholder="Role"
    [(ngModel)]="role"
    [maxlength]="maxChars">
  </textarea>
  <br/>
  <br>
  <label class="nopadding clrlbl">
    Characters Remaining: {{role.length}}/{{maxChars}}
  </label>
  <br/>
</div>

在您的班级：

@Component({...})
export class AppComponent  {
  maxChars = 800;
  role = '';
  chars = 0;
}

这是您推荐的Sample StackBlitz。

增加按键角度4的计数器并减少退格键

1 个答案: