Textarea that automatically adjusts its own font-size according to content & its length

Question

This has been asked, but as it seems not for Javascript.

I would like to create a TextArea that has two sets of font sizes, one for when it contains less than 3 lines and one for when it contains more than that.

The only problem is that not only will the number of lines in the Textarea affect the chosen font-size, it will also be the amount of content, as when someone just enters a straight line of text without even a single newline, the Textarea will break the lines (using another wrap where horizontal scrolling becomes available is not a solution, unfortunately).

I created a detailled jsFiddle: http://jsfiddle.net/kF9LY

How can i measure the .value content of the Textarea in a fashion that will give me a clear calculation of the lines used, either by newlines or by content exceeding the width of a single line (and thus being displayed in the second) ?

dqhendricks · Accepted Answer · 2012-06-11T23:55:22.883

0

the number of lines as you are describing cannot be measured as far as i know.

you may be able to detect on a key event whether the textarea's scrollHeight has become greater than its height however, meaning that a scrollbar has appeared, and you can then adjust the font size as needed.

edited Jun 11 '12 at 23:55

answered Jun 11 '12 at 22:57

dqhendricks

19,030
11
50
83

Finally i managed to find a solution that is based on measuring scrollHeight. I was lucky it worked even with overflow: hidden. It was not easy as i had to do the calculations after each keypress by simulating the adding of another character. As i use a non fixed-width font, i chose to add a capital 'W' character to the textareas content and then measure what happened after that. Afterwards i would remove the extra character. While at first it felt like a dirty approach, it turned out to work just fine. – SquareCat Jun 17 '12 at 21:11

score 0 · Answer 2 · edited May 23 '17 at 11:55

0

It looks like you can find the number of lines from one of the answers in the question, How to get number of rows in <textarea >?.

edited May 23 '17 at 11:55

Community

1
1

answered Jun 11 '12 at 23:23

mark

147
10

I didnt find this! Shame! I will try the solution posted [here](http://stackoverflow.com/a/1761203/1018787) and if it works will accept this as answer – SquareCat Jun 11 '12 at 23:30
Sorry but using this approach i was unable to get a proper result. – SquareCat Jun 17 '12 at 00:40

Textarea that automatically adjusts its own font-size according to content & its length

2 Answers2