【指令篇】ionic3自适应大小textarea指令 (实用)

爱被打了一巴掌 2022-01-10 15:13 150阅读 0赞

原文出处：[https://www.jianshu.com/p/f25af70d5556][https_www.jianshu.com_p_f25af70d5556] （作者：IT睛天）  
延伸阅读: [Auto growing textarea in ionic][]  
延伸阅读：[ionic 3 textarea autosize (not ion-textarea)][ionic 3 textarea autosize _not ion-textarea]

> 这指令不是我发明的，国外看到的，找个地方记录一下。关于指令的一些简单说明，可以看我这篇文章：[【开发指南】（五）ionic3应该善用组件和指令][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`方法调整样式。

[https_www.jianshu.com_p_f25af70d5556]: https://www.jianshu.com/p/f25af70d5556
[Auto growing textarea in ionic]: https://stackoverflow.com/questions/24480224/auto-growing-textarea-in-ionic
[ionic 3 textarea autosize _not ion-textarea]: https://stackoverflow.com/questions/54512068/ionic-3-textarea-autosize-not-ion-textarea
[ionic3]: https://www.jianshu.com/p/3a0075e82e52