Question

我使用以下指令允许根据用户输入自动调整文本区域的大小：

import { ElementRef, HostListener, Directive, OnInit } from '@angular/core';

@Directive({
  selector: 'ion-textarea[autosize]'
})

export class Autosize implements OnInit {
  @HostListener('input', ['$event.target'])
  onInput(textArea:HTMLTextAreaElement):void {
    this.adjust();
  }

  constructor(public element:ElementRef) {
  }

  ngOnInit():void {
    setTimeout(() => this.adjust(), 0);
  }

  adjust():void {
    const textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];
      textArea.style.height = 'auto';
      textArea.style.height = textArea.scrollHeight + "px";
      textArea.style.maxHeight = '100px';
  }
}

它按预期工作，但是当手动删除该文本区域内的文本时，该文本区域不会自动调整大小。

例如如果分配给该文本区域的[（ngModel）]变量分配了其他字符串或空字符串，则文本区域的高度不会自动调整大小。用户需要再次开始键入文字，以便相应地调整文本区域的大小。

解决这个问题的最佳解决方案是什么？

Answer 1

尝试添加如下内容：

ngAfterContentChecked(): void {
    this.adjust();
}

或仅使用以下库：ngx-autosize：）

更新
带有ngAfterContentChecked挂钩的解决方案仍然有效，但是如果使用频率过高，可能会影响应用速度...

另一种方法是将ngModel视为输入，这将使您依赖ngOnChanges挂钩，因此请在您的指令中尝试添加：

...
@Input('ngModel') text: any;
...
ngOnChanges(changes) {
    if (changes.text) {
        this.adjust();
    }
}

Answer 2

我正在使用这种简单方法，删除文本时textarea确实会缩小：

<textarea (keyup)="autoGrowTextZone($event)"></textarea>

和

autoGrowTextZone(e) {
  e.target.style.height = "0px";
  e.target.style.height = (e.target.scrollHeight + 25)+"px";
}

Answer 3

您可能不需要编写自己的指令。您可以使用官方Angular CDK中的cdkTextareaAutosize。

https://material.angular.io/components/input/overview#auto-resizing-code-lt-textarea-gt-code-elements

Answer 4

您不需要使用以下方法找到textArea：

this.element.nativeElement.style.height = 'auto';
this.element.nativeElement.style.height = this.element.nativeElement.scrollHeight + 'px';
this.element.nativeElement.style.maxHeight = '100px';

角度-文本删除时Textarea的自动高度不会自动调整大小

4 个答案: