离子中自动增长的文本区域 [英] Auto growing textarea in ionic

问题描述

我正在尝试向我的应用程序添加一个自动增长的文本区域，但由于某种原因它不起作用.我使用的模块是 https://github.com/tagged/autogrow(它被推荐在离子论坛)

I am trying to add an autogrowing textarea to my app but for some reason it is not working. The module that I am using is https://github.com/tagged/autogrow (it was recommneded on the ionic forum)

推荐答案

我编写了一个非常简单的指令，适用于 Ionic 2 和 ion-textarea.这是:

I wrote a very simple directive that works with Ionic 2 and ion-textarea. Here it is:

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

@Directive({
selector: "ion-textarea[autoresize]" // Attribute selector
})
export class Autoresize {
  @HostListener("input", ["$event.target"])
  onInput(textArea: HTMLTextAreaElement): void {
    this.adjust();
  }

  constructor(public element: ElementRef) {
  }

  ngOnInit(): void {
    this.adjust();
  }

  adjust(): void {
    let ta = this.element.nativeElement.querySelector("textarea");
    ta.style.overflow = "hidden";
    ta.style.height = "auto";
    ta.style.height = ta.scrollHeight + "px";
  }
}

这是一个要点:https://gist.github.com/maxt3r/2485356e94b1601>

查看要点以获取其他人的其他建议.

Look at the gist for other suggestions from other people.

这篇关于离子中自动增长的文本区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！