ionic（17）：textarea长文本，多行文本输入实现

1. 首先创建一个指令

ionic g directive autosize

2. 创建后在指令中添加如下代码

import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
  selector: '[autosize]' // Attribute selector
})
export class AutosizeDirective {
  @HostListener('input', ['$event.target'])
  onInput(textArea:HTMLTextAreaElement):void {
    this.adjust();
  }
  constructor(public element:ElementRef) {
    console.log('Hello AutosizeDirective Directive');
  }
  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. 随便找个页面测试

  <ion-item>
    <ion-textarea name="dummyText" [(ngModel)]="dummyText" autosize></ion-textarea>
  </ion-item>

4. 参考资料： 【指令篇】ionic3自适应大小textarea指令