Установите начальную высоту текстовой области в соответствии с ее содержанием

Question

Я использую реактивную угловую форму, которая сохраняет все поля отключенными. Оказывается, textarea создает свиток и затрудняет чтение для тех, кто только визуализирует.

я уже пробовал с css

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

Я бы хотел, чтобы он расширялся в соответствии с его содержанием, вел себя как DIV со своими должными дополнениями.

Answer 1

вы можете следить за этим:)

var textarea = document.querySelector('textarea');

textarea.addEventListener('keydown', autosize);
             
function autosize(){
  var el = this;
  setTimeout(function(){
    el.style.cssText = 'height:auto; padding:0';
    // for box-sizing other than "content-box" use:
    // el.style.cssText = '-moz-box-sizing:content-box';
    el.style.cssText = 'height:' + el.scrollHeight + 'px';
  },0);
}

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>

Answer 2

Спасибо @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;

}

Answer 3

Вы можете создать директиву 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