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

Posted 2023-05-07

【中文标题】Angular - Textarea 自动高度不会在文本删除时自动调整大小

【英文标题】：Angular - Textarea auto height does not automatically resize on text deletion

【发布时间】：2018-12-27 20:16:42

【问题描述】：

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

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';
  

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

例如如果分配给该 textarea 的 [(ngModel)] 变量被分配了不同的字符串或空字符串，则文本区域的高度不会自动调整大小。用户需要重新开始输入才能使 textarea 相应地调整大小。

什么是解决这个问题的好方法？

【参考方案1】：

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

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

和

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

【参考方案2】：

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

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

【参考方案3】：

尝试添加如下内容：

ngAfterContentChecked(): void 
    this.adjust();

或者只使用这个库：ngx-autosize :)

更新 使用 ngAfterContentChecked 钩子的解决方案仍然有效，但如果使用太频繁可能会影响应用速度...

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

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

【参考方案4】：

你不需要找到 textArea，使用：

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