具有自动调整大小的多个文本区域在 ionic3 中不起作用

Posted

技术标签:

【中文标题】具有自动调整大小的多个文本区域在 ionic3 中不起作用【英文标题】:Multiple textarea with autosize not working in ionic3 【发布时间】:2018-12-08 14:29:20 【问题描述】:

我正在使用多个 textarea 并使用 ionic3 和 angular 自动调整大小,但它仅适用于单个 textarea。我可以获得解决此问题的指南吗?以下几行是我的代码

home.html

<ion-list [formGroup]="editForm">  
 <ion-item>
  <ion-label floating class="label">Description1</ion-label>
  <ion-textarea autosize formControlName="desc"></ion-textarea>
 </ion-item>
<ion-item>
  <ion-label floating class="label">Description2</ion-label>
  <ion-textarea autosize formControlName="desce"></ion-textarea>
 </ion-item>
</ion-list>

首页.ts

import  Component, Directive, OnInit, HostListener, ElementRef  from '@angular/core';

@IonicPage()

@Component(
selector: 'page-home',
templateUrl: 'home.html',
 )
  @Directive(
  selector: 'ion-textarea[autosize]'
  )
 export class Home implements OnInit 
 @HostListener('input', ['$event.target'])
  onInput(textArea: HTMLTextAreaElement): void 
    this.adjust();

 constructor(public element: ElementRef,)
 ngOnInit(): void 
    setTimeout(() => this.adjust(), 0);


adjust(): void 
    let textArea = 
    this.element.nativeElement.getElementsByTagName('textarea')[0];
    textArea.style.overflow = 'hidden';
    textArea.style.height = 'auto';
    textArea.style.height = textArea.scrollHeight + "px";
 

【问题讨论】:

【参考方案1】:

它只适用于单个文本区域,因为您告诉它只在数组中的第一个区域上运行

let textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];

getElementsByTagName 返回屏幕上所有文本区域的数组。所以你应该尝试迭代那些。类似于:

const textAreas = this.element.nativeElement.getElementsByTagName('textarea');
textAreas.forEach(textArea => 
    textArea.style.overflow = 'hidden';
    textArea.style.height = 'auto';
    textArea.style.height = textArea.scrollHeight + "px";
);

附带说明一下,您可能希望在未来考虑使用 ViewChild/ViewChildren。这是直接以角度使用/访问 dom 元素的正确方法,应尽可能使用

I spun up a quick example using ViewChildren here 使用 ViewChildren 和另一个 *** post 的角度文档

【讨论】:

感谢您的回答,我尝试使用 this.element.nativeElement.getElementsByTagName('textarea');,但仍然有问题。 @MaryAnn 我在答案中添加了一个使用 ViewChildren 的示例,您真的应该使用它。在没有看到您更改的代码的情况下,我不确定当前的问题是什么。您是否记录了该代码返回的内容以确保您获得了一系列项目?你也确定要遍历那个数组吗?

以上是关于具有自动调整大小的多个文本区域在 ionic3 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

创建具有自动调整大小的文本区域

根据内容自动调整文本区域的大小[重复]

如何使用原型自动调整文本区域的大小?

IE 11 的自动调整文本区域大小

Internet Explorer 10,自动调整文本区域大小

自动调整多个文本区域的高度以适应加载的内容