Question

当前，我正在使用以下代码编写指令，以根据用户输入自动调整文本区域的大小：

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.overflow = 'hidden';
    textArea.style.height = 'auto';
    textArea.style.height = textArea.scrollHeight + 'px';
  }
}

但是，我一直在努力增加最大高度。由于如果用户输入了很长的消息，则文本区域将在视图外部扩展。有没有办法让它扩展直到文本区域的行达到 3 ，然后像正常的文本区域一样工作，内部滚动并固定高度？

Answer 1

尝试为您的元素设置CSS属性max-height。

Answer 2

您可以将maxHeight添加到元素样式。

Here's a working example.

adjust():void {
   const textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];
   //textArea.style.overflow = 'hidden';
   textArea.style.height = 'auto';
   textArea.style.height = textArea.scrollHeight + 'px';
   textArea.style.maxHeight = '100px';
}

Angular-Textarea指令maxHeight

2 个答案: