【指令篇】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方法调整样式。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android机动车

Material Design整理(二)——SnackBar

782
来自专栏张善友的专栏

ASP.NET MVC 4 RC的JS/CSS打包压缩功能

打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网...

2157
来自专栏Youngxj

emlog文章二维码插件1.1

1734
来自专栏木子墨的前端日常

前端项目性能优化笔记

饱暖思淫欲,当我们完成基本的业务需求之后,我们就需要去思考一下如何是我们的业务更加的流畅、代码更健壮等等,以下是我在项目中做的一些基本的项目优化工作,小小记录一...

1303
来自专栏魏艾斯博客www.vpsss.net

WDCP 面板安装教程

9794
来自专栏娱乐心理测试

小程序如何避免多次点击,重复触发事件

作为前端开发,我们经常会遇到的场景,比如用户点击获取验证码按钮时,没有反应,大部分用户都会接着点击,这就会造成用户收到多条验证码,这是因为后台api请求比较慢,...

1.5K5
来自专栏ytkah

如何复制图文消息封面图片?正文没显示

  最近小美眉又有小烦恼了,她看到别人发的图文消息封面图片很漂亮,但是打开正文却没有显示,是发布者在编辑素材时把【□封面图片显示在正文中】前的勾去掉了。那么如何...

3425
来自专栏鸡蛋君

实用脚本汇集

1603
来自专栏ThoughtWorks

《Understanding *nix Bash Profile》详细解释了Bash的配置。

作为一个ThoughtWorker,不熟悉命令行几乎是一件被人嘲笑的事,而Bash又几乎是每个人的入门shell。 但你对Bash了解多少呢?你知道究竟应该配...

3097
来自专栏娱乐心理测试

小程序验证码倒计时

4995

扫码关注云+社区

领取腾讯云代金券