Angular

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 属性最大高度。

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

Angular - Textarea directive maxHeight

ionic-framework

textarea

directive