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

最新推荐文章于 2021-10-19 18:25:07 发布

chelen_jak

最新推荐文章于 2021-10-19 18:25:07 发布

阅读量939

点赞数

分类专栏：实用 Ionic3

实用同时被 2 个专栏收录

738 篇文章

订阅专栏

Ionic3

175 篇文章

订阅专栏

文章记录了一个国外看到的ionic3自动调整文本框大小的指令。介绍了创建指令的方法，即使用ionic g directive autosize创建，还需打开文件编辑，可在html页面添加内容测试效果，其原理是监听input事件调整样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文出处：https://www.jianshu.com/p/f25af70d5556 （作者：IT睛天）
延伸阅读: Auto growing textarea in ionic
延伸阅读：ionic 3 textarea autosize (not ion-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方法调整样式。