时间戳

首页 > 解决方案 > Angular 9 - 当用户输入内容时扩展文本框的高度，并在点击它时恢复正常大小

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

问题描述

我有以下要求，其中输入字段的高度应该调整以显示用户输入的任何内容，然后一旦他点击它就会恢复到正常大小。像这样的东西- 在此处输入图像描述

当用户输入请求时，它必须展开（第二个请求条目），当他单击框外时，它必须恢复正常（第一个请求条目）。当您输入任何标题或查询参数时，类似于“POSTMAN”应用程序的行为。

标签： htmlcssangularless

解决方案

从这个答案

你可以有一个变量'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中的一个简单示例

推荐阅读