【指令篇】ionic3自适应大小textarea指令

这指令不是我发明的,国外看到的,找个地方记录一下。关于指令的一些简单说明,可以看我这篇文章:【开发指南】(五)ionic3应该善用组件和指令

假如对指令有所了解了,那首先创建一个指令:

ionic g directive autosize

打开文件编辑:

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';
  }
}

然后随便找个html页面,加上下面这些内容测试看下效果,效果图我就不上了:

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

原理就是监听input事件,每次输入后执行adjust方法调整样式。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容