Angular 9 - 当用户输入内容时，扩大文本框的高度，并在点击后恢复到正常大小。

Question

我有以下需求，一个输入字段的高度应该调整为显示用户输入的任何内容，然后一旦用户点击退出，它就会恢复到正常大小。就像这样

当用户输入请求时，它必须展开（第二个请求条目），当他点击框外时，它必须回到正常状态（第一个请求条目）。就像 "POSTMAN "应用程序在输入任何标题或查询参数时的做法。

Answer 1

从 本回答

你可以有一个变量 "heigth "和一个函数来接收textArea。

heigth = "1.125rem";

changeHeigth(textArea) {
    this.heigth = null;
    setTimeout(() => {
      this.heigth = textArea.scrollHeight + "px";
    });
  }

要 "自动调整大小"，必须先将heigth置为null，然后，在下一步等于scrollHeigth。这就是使用setTimeout的原因。

所以，你在（焦点）（模糊）和（输入）中控制高度。

<textarea #textArea  [style.height]="heigth" 
                       (input)="changeHeigth(textArea)" 
                       (focus)="heigth=textArea.scrollHeight+'px'" 
                       (blur)="heigth='1.125rem'"></textarea>

举一反三 爆料