Auto expanding textarea in Opera and Konqueror
25 Feb 2008
I recently had to make an auto expanding textarea for a web application and when it came to Opera, I couldn’t find a working solution. The most common way of making the textarea to auto expand is to compare the offsetHeight
or clientHeight
of the textarea with the scrollHeight
. This works fine in IE, Firefox, and Safari (and even allows auto shrinking in IE) but not in Opera or Konqueror. Some solutions I found divided the number of characters by the number of rows and and cols in the textarea. The problem with this is that many people don’t type everything on one line, so it won’t accurately measure how many lines there are.
After thinking about both of those solutions, I decided to write my own, which calculates the number of lines based on how many newline characters are in the text and whether or not each line has more characters than the number of cols. There is however one catch: for the word wrap to work when there are as many characters in a line as there are cols in the textarea, the font has to be monospace, otherwise the script will not work reliably. So, without futher ado, here’s the basic code:
HTML:
Javascript:
Auto shrinking is also possible in IE, Opera, and Konqueror and horizontal expanding is possible in Firefox, Opera, and Konqueror. If anyone ever uses that, I can post it too. Note: The script is not perfect, and doesn’t calculate 100% acurately, but so far it’s the most reliable script for auto expanding a textarea in Opera I know of.
- Posted in:
- Web Development