自动调整 textarea 最大 5 行限制，然后显示滚动条

Posted 2023-03-13

【中文标题】自动调整 textarea 最大 5 行限制，然后显示滚动条

【英文标题】：Autosize textarea with max 5 line limit, then show scrollbar

【发布时间】：2020-01-18 01:57:37

【问题描述】：

说明：在 Angular 2 中，在我的聊天屏幕上，我想在输入时将聊天屏幕的大小增加到最多 5 行，然后显示滚动条。我该怎么做？

问题：行为不符合预期。此处需要滚动条限制为 5 行，理想情况下收缩，展开不起作用。

要求：它应该在我键入时扩展，在我按退格键时收缩。 5 行后它应该显示滚动条。

我的代码：

home.ts

autogrow()
  let  textArea = document.getElementById("textarea")       
  textArea.style.overflow = 'hidden';
  textArea.style.height = '0px';
  textArea.style.height = textArea.scrollHeight + 'px';

home.html

<textarea id="textarea" (keyup)="autogrow()" ></textarea>

【问题讨论】：

使用rows="rowSize" 属性。在你的功能内autogrow() rowSize++

如果你在 stackbiltz 上与你尝试过的任何东西共享最少的代码会更好，然后社区可以修复/修改你的代码并共享工作副本

@NajamUsSaqib 任何工作演示？

查看这个例子：blog.invoiceberry.com/2011/03/…

【参考方案1】：

您可以尝试制作这样的指令：

    @Directive(
     selector: 'ion-textarea[autosize]'
     )

export class AutoSizeDirective implements OnInit 

  @HostListener('input', ['$event.target'])
  onInput(target): void 
    this.adjust(target);
  

  @HostListener('focus', ['$event.target'])
  onFocus(target): void 
    this.adjust(target);
  

  constructor(public element: ElementRef) 

  ngOnInit(): void 
    setTimeout(() => this.adjust(), 100);
  

  adjust(textArea: HTMLTextAreaElement = null): void 
    if (textArea == null) 
        textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];
    
    textArea.style.overflow = 'hidden';
    textArea.style.height = 'auto';
    textArea.rows = 1;

    if (textArea.scrollHeight < 200)  //or whatever height you like
      textArea.style.height = textArea.scrollHeight + 'px';
     else 
      textArea.style.height = 200 + 'px';
    

  

然后在您的 html 中，您只需使用标签中的 autosize 属性，如下所示：

<textarea autosize .....>

您还必须将指令添加到 app.module 中。 希望这能解决您的问题。