html - 禁用在textarea中键入

Question

我想在达到字数限制时禁止用户在文本区域中输入。但是用户应该能够在给定的限制内编辑文本。

我使用attr.disabled属性来禁止输入。但是，这只会阻止用户输入和编辑。我想做到这一点。

提前谢谢

Answer 1

demo将此放入组件以计算空间

check(){
    return this.test.split(" ").length-1;
    
  }

在HTML中

<textarea 
    [(ngModel)]="test"
    name=".."
    placeholder="..."
    [maxLength]="10+check()"
   >
</textarea>

如果您认为函数发生性能损失，请使用(keypress)方法并在component.ts中将属性创建为ex_length=0;。

keypress(){
    this.ex_length=this.test.split(" ").length-1; 
}

在HTML中

<textarea 
    [(ngModel)]="test"
    name=".."
    placeholder="..."
    (keypress)="onkeypress()"
    [maxLength]="10+ex_length"
   >
</textarea> 

或以其他方式可以使用自定义管道Demo

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

@Pipe({
  name: 'max'
})
export class MaxPipe implements PipeTransform {

  transform(value: any): any {
    return 10 + value.split(" ").length-1;
  }

}

一个在HTML

<textarea 
    [(ngModel)]="test"
    name=".."
    placeholder="..."
    [maxLength]="test | max"
   >
</textarea>