Как получить ширину и высоту текста внутри TextArea в HTML с помощью JavaScript?

Question

Имеют такой сценарий:

Необходимо получить размер red box внутри текстовой области.В основном размер текста, а не размер текстовой области.

HTML-код просто так:

<textarea style="width:450px;"></textarea>

Есть ли способ добиться этого, используя Angular4 + или Javascript?

Answer 1

РЕДАКТИРОВАТЬ:

Чтобы рассчитать ширину произвольной строки, вы можете использовать этот подход:

var fontSize = 12;
var widthTest = document.getElementById("widthTest");
widthTest.style.fontSize = fontSize;
var height = (widthTest.clientHeight + 1) + "px";
var width = (widthTest.clientWidth + 1) + "px"

console.log(height, width);

#widthTest
{
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap; 
}

<div id="widthTest">
    FooBarEatsBarFoodBareFootWithBarFoo
</div>

Если вы хотите ширину определенного элемента, в который помещается текст, используя javascript , вы можете сделать это следующим образом:

document.getElementById("myTextArea").offsetWidth

или

document.getElementById("myTextArea").clientWidth

ИНФОРМАЦИЯ:

offsetWidth включает ширину границы, clientWidth не

В вашем случае вам нужно применить идентификатор к вашей текстовой области, например:

 <textarea id="myTextArea" style="width:450px;"></textarea>

Если вы хотите получить ширину в угловом коде компонента:

someComponent.html:

 <textarea #myTextAreaRef style="width:450px;"></textarea>

someComponent.ts:

export class SystemComponent implements OnInit {

   @ViewChild('myTextAreaRef') public myTextAreaRef;
   ...
   ..

   someFunction() {
      console.log(this.myTextAreaRef.nativeElement.someAttribute)
   }