ionic(17):textarea长文本,多行文本输入实现

  1. 首先创建一个指令
ionic g directive autosize
  1. 创建后在指令中添加如下代码
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';
  }
}
  1. 随便找个页面测试
  
    
  
  1. 参考资料: 【指令篇】ionic3自适应大小textarea指令

你可能感兴趣的:(ionic(17):textarea长文本,多行文本输入实现)