How to get text width inside textarea? (javascript/jquery)

Question

Is it possible to get width of text inside a textarea element?

I don't want $('textarea').val().length per se, as it doesn't depend on font-size.

I would prefer the absolute width of the text inside.

Pekka · Accepted Answer · 2010-10-17 12:55:52Z

9

It's well possible this information is impossible to get hold of.

Workaround idea:

Create a span element with the font size settings of the textarea
Give the span element the input's value using .text(value)
Measure the span's width

answered Oct 17, 2010 at 12:55

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

BrunoLM Over a year ago

@framomo86: If I can remember well, this was Facebook's approach to auto-resize the textarea accordingly to the size of the text. But instead of span I guess a pre element is better, it would jump lines with \n and wouldn't need a <br>.

JuanCaicedo Over a year ago

Does this new span/pre need to be inserted into the page? I'm consistently getting a width of 0

Pekka Over a year ago

@JuanCaicedo I think it might be! Give it a display: none so it doesn't show. (The dimensions should be calculated then.)

JuanCaicedo Over a year ago

It does :) However I think visibility:hidden works better than display:none because then it still takes up space. It's good to then use absolute positioning so it doesn't move things around on the page. I followed the CSS in stackoverflow.com/questions/118241/…

이승현 Over a year ago

Very good advise!

Collectives™ on Stack Overflow

How to get text width inside textarea? (javascript/jquery)

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related