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?

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?

• javascript
• html
• angular

• 1 May you please share at least the relevant html code? If the red box is any kind of HTML Element, you can use @ViewChild and access to the native element properties using elementRef. – briosheje Commented Oct 19, 2018 at 8:26
• I've posted an answer including both, how to do it in pure js or in your angular ponent - everything clear so far? – iLuvLogix Commented Oct 19, 2018 at 8:40
• This doesn’t exist in the DOM as a specific element whose dimensions you could query. You can either take that text content, split it into lines and count which is the longest one, if a result à la “20 by 2 characters” is enough for your purposes. Otherwise, you need to put this into some other element first, that has the ability to shrink to its content’s width, and then measure the dimensions of that. – misorude Commented Oct 19, 2018 at 8:43
• You can't access that box specifically, it's not in the MDN specification at all. I've created a stackblitz for you to work on, where whenever you input on the textArea it logs the textArea native element properties, perhaps you can get or guess something ouf of it: stackblitz./edit/angular-ywyjgv . The official MDN specifications you should are can be found here: developer.mozilla/en-US/docs/Web/API/HTMLTextAreaElement – briosheje Commented Oct 19, 2018 at 8:48
• I've updated my answer.. – iLuvLogix Commented Oct 19, 2018 at 9:01

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