How to get text width and height inside a TextArea in HTML using JavaScript?

Question

Have this scenario:

Need to get the size of the red box inside the textarea. Basically dimension of the text, and not the dimension of the textarea.

the html code is just this:

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

Is there a way to achieve this, using Angular4+ or Javascript?

Answer 1

EDIT:

To calculate the width of an arbitrary string you could use this approach:

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>

If you want the width of a certain element the text is placed in using javascript you can do it like:

document.getElementById("myTextArea").offsetWidth

or

document.getElementById("myTextArea").clientWidth

INFO:

offsetWidth includes border width, clientWidth does not

In your case you need to apply an id to your textarea like:

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

If you want to get the width in your angular component code:

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)
   }