Angular 9 - Увеличивайте высоту текстового поля, когда пользователь вводит что-то, и возвращаются к нормальному размеру, когда щелкаете по нему.

Question

У меня есть следующее требование, когда высота полей ввода должна корректироваться, чтобы показать, что пользователь ввел, а затем он возвращается к нормальному размеру, когда он щелкает. Примерно так:

Когда пользователь вводит запрос, он должен расширяться (вторая запись запроса), а когда он щелкает из поля, он должен go вернуться к нормальный (первая запись запроса). Что-то вроде того, что делает приложение POSTMAN при вводе любого заголовка или параметров запроса.

Answer 1

из этот ответ SO

Вы можете иметь переменную 'heigth' и функцию, которая получает textArea:

heigth = "1.125rem";

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

Для "автоматического размера" это Сначала необходимо установить значение null, а затем на следующем шаге значение scrollHeigth. Это причина для использования setTimeout

Итак, вы управляете высотой в (фокус) (размытие) и (ввод)

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

, см. Простой пример в stackblitz