ionic 3 textarea 自动调整大小（不是 ion-textarea）答案

【问题标题】：ionic 3 textarea autosize (not ion-textarea)ionic 3 textarea 自动调整大小（不是 ion-textarea）
【发布时间】：2019-06-27 22:52:35
【问题描述】：

我需要的自动调整大小（弹性）。我需要使用 <textarea>，不能将 <ion-textarea> 用于其他问题。</ion-textarea>

我在关注：How to autoresize the ion-input field vertically while i am typing & https://stackblitz.com/edit/expandable-input

正在工作：

@Directive({ selector: 'ion-textarea[autosize]' })

但是，不适用于

@Directive({ selector: 'textarea[autosize]' })

这是我的 Stackblitz（自动调整大小不起作用）：https://stackblitz.com/edit/expandable-input-htjncw

控制台错误：“ERROR TypeError: Cannot read property 'style' of undefined ...”

代码：

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

【问题讨论】：

请在此处提供minimal reproducible example。不是链接
请看最后一个网址：stackblitz.com/edit/expandable-input-htjncw
你会从this.element.nativeElement得到textarea，因为你没有使用离子组件。

标签： ionic3 textarea autosize

【解决方案1】：

如果您将指令添加到 textarea 而不是 ion-textarea，则可以直接从 nativeElement 访问 html 元素。你不会通过getElementsByTagName访问

adjust():void {
    const textArea = this.element.nativeElement;
    textArea.style.overflow = 'hidden';
    textArea.style.height = 'auto';
    textArea.style.height = textArea.scrollHeight + 'px';
}

【讨论】：