如何自动调整文本区域的大小以适应内容？

Question

我正在尝试自动调整大小textarea 以使其适合其中的内容，但是在单击 Enter 以继续下一行后，我遇到了口吃问题。我怎样才能解决这个问题？

这就是我想要做的，见下图。

有关 StackBlitz 示例，请参阅此链接

代码

this.form.valueChanges.subscribe(() => {
   const textarea = this.myDiv.nativeElement;
   textarea.addEventListener('keydown', function() {
       setTimeout(() => {
           this.style.cssText = 'height:auto; padding:0';
           this.style.cssText = 'height:' + this.scrollHeight + 'px';
       }, 0);
   });
});

Answer 1

addEventListener这里是多余的，因为valueChanges在字段更改时已经通知您。相反，使用ViewChild参考更新高度myDiv。

this.myForm.valueChanges.subscribe(value => {
    this.myDiv.nativeElement.style.height = 'auto';
    this.myDiv.nativeElement.style.height = `${this.myDiv.nativeElement.scrollHeight}px`;
});

然后添加overflow: hidden到您的 css 以便滚动条不显示。

textarea {
    resize: horizontal;
    overflow: hidden;
}

您可以保留resize: horizontal;但不再需要它，因为无论如何 textarea 都会自动调整大小。

这是StackBlitz上的一个工作示例。