JobPlus知识库 IT 软件开发 文章
【指令篇】ionic3自适应大小textarea指令

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

  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方法调整样式。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

¥ 打赏支持
466人赞 举报
分享到
用户评价(0)

暂无评价,你也可以发布评价哦:)

扫码APP

扫描使用APP

扫码使用

扫描使用小程序