my ionic3我爱编程

ionic 实现动态高度的textarea

2018-03-05  本文已影响16人  种提莫的蘑菇

1.首先是在HTML中要有对应的元素:

 <ion-textarea autosize></ion-textare>

2.就是核心。ts的实现:

//首先是导入

import { ElementRef, HostListener }from '@angular/core'; 

创建监听  

@HostListener('input', ['$event.target']) 

onInput(textArea:HTMLTextAreaElement):void {

this.adjust();

}

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

}

上一篇下一篇

猜你喜欢

热点阅读