在移动端中textarea如何显示滚动条？

Posted 2023-04-06

参考技术A

 文字超出范围，自动就出现滚动条了

定义和用法

<textarea> 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

参考技术B 文字超出了 默认就会显示滚动条呀，如果你要一开始就显示的话

textarea 添加css <textarea style=" overflow: hidden;overflow-y: scroll;"></textarea>追问

可是移动设备中，显示的时候是不带滚动条的，只有滑屏的时候才会显示。不过问题已经解决了，我把高度撑开解决的。这应该是做手机软件的事吧，我就不去纠结了，谢谢帮助！

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

【中文标题】自动调整 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 中。 希望这能解决您的问题。