根据其内容设置文本区域的初始高度

Question

我使用反应性角度形式，该形式保存所有禁用的字段。事实证明，textarea会创建一个滚动条，并使那些只是可视化的人难以阅读。

我已经尝试过使用CSS

 textarea:disabled {
  height: 100%;
  font-size: 13px;
  text-align: justify;
  resize: none;
 }

我希望它根据其内容进行扩展，使其表现得像带有适当填充的DIV。

Answer 1

您可以创建一个名为contentHeight的指令，并像这样使用它

<textarea contentHeight></textarea>

和指令

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

@Directive({
  selector: '[contentHeight]'
})
export class ContentHeightDirective {

  constructor(private el: ElementRef) { }

  ngOnInit() {
    const nativeElement = this.el.nativeElement;
    nativeElement.style.height = '1px';
    console.log(nativeElement.value)
    nativeElement.style.height = nativeElement.scrollHeight + 'px';
  }
}

https://stackblitz.com/edit/angular-beamvj

Answer 2

您可以按照此：）

textarea{  
  /* box-sizing: padding-box; */
  overflow:hidden;
  /* demo only: */
  padding:10px;
  width:250px;
  font-size:14px;
  margin:50px auto;
  display:block;
  border-radius:10px;
  border:6px solid #ff0000;
}

<textarea rows='1' placeholder='Auto-Expanding Textarea'></textarea>

{{1}}

Answer 3

感谢@adrian Brand从您的代码中获得了其他工具，并获得了预期的结果

ngAfterContentChecked() {
    var vtextarea = this.elRef.nativeElement.querySelectorAll('textarea')
    for(let i=0;i<vtextarea.length;i++){
      vtextarea[i].style.height = vtextarea[i].scrollHeight + 'px';      
    }
  }

css无需滚动条即可更好地查看

textarea:disabled{
  height: 100%;
  font-size: 13px;
  text-align: justify;
  resize: none;
  overflow: hidden;

}