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

Posted 2023-05-07

【中文标题】IE 11 的自动调整文本区域大小

【英文标题】：Autoresize textarea for IE 11

【发布时间】：2019-08-22 16:38:00

【问题描述】：

自动调整 textarea 的大小，将其调整为 10 行，然后滚动条起作用。它可以工作，但带有滚动条闪烁和文本跳转。所以我需要它用于 Angular 项目，然后将此代码编译为 Web 组件。 这是我的一些代码： jsbin.com/qivakevaxa/1/edit?html,css,js,输出

【参考方案1】：

您的代码在我这边的 Chrome 和 IE 11 浏览器上运行良好。

如果您想在 Angular 应用程序中使用您的代码，您可以参考以下代码：

about.component.ts 中的代码：

import  Component, OnInit  from '@angular/core';
@Component(
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
)
export class AboutComponent implements OnInit 
  ngOnInit() 
  
  onchange(event) 
    event.target.style.height = 'auto';
    event.target.style.height = event.target.scrollHeight+'px';
    event.target.scrollTop = event.target.scrollHeight;
    console.log( "Input Event:", event.target.value );
  

about.component.html 中的代码：

<textarea id="mytextarea" (input)="onchange($event)" rows='3'>Type here and I’ll resize.</textarea>

about.component.css 中的代码：

    textarea 
      display: block;
      /* resize: none; */
      box-sizing:border-box;
      max-height:200px;
    

【讨论】：

是的，它以角度工作。但我的意思是它的滚动条闪烁和文本跳跃。我不知道如何解决它

类似this的结果，在我这边似乎效果很好（使用IE 11.523.17134.0版本）。尝试清除浏览器缓存并重新测试。

是的，我做到了。当我快速按回车时，效果不好。