Tell if textarea has scrollbars or not, or has 'overflowed'?

[glz]

Let's say you have a textarea 30px by 30px, you fill it with more than 10,000 text characters. It will obvious that the scrollbars will activated because there is so much text in the small space. In other words, it 'overflowed'. Now other than common sense, is it possible to tactically tell with javascript/css when text in a textarea has overflowed, or caused there to be the appearance of of scrollbars, height scrollbars and/or width scrollbars.

If so, I'd like to see some code to achieve this.

-Thanks http://bstats.freehostia.com/b.gif

[jscheuer1]

All form elements (textarea is a form element) are kinda screwy cross browser. Generally, textareas are measured by rows and columns, not by pixels, and there are various ways they can wrap - that too is (for the most part) non-standard. Perhaps you mean a text field? Probably not.

Anyways, this could be worked out approximately. But things would have to be checked in all target browsers due to what I've already mentioned.

There might be a better approach. To determine that, we would need to know why exactly you want to do this - the specific application this would be put to. Can you explain, or were you just wondering about this in an idle sort of way?

[glz]

I'm working on a script that needs to know the average (not all letters the same dimensions) width & height in pixels of a single text character inside of a textarea. These single characters are dynamic in their font and font size, so a uniform way to measure the average width & height of a character no matter the font size or font is crucial.

[jscheuer1]

That could be worked out in a limited sort of way for a few browsers if they were to have their generic settings. But I doubt very much anything can be worked out that is truly cross browser. See:

http://www.web-wise-wizard.com/html-tutorials/html-form-forms-textarea-wrap.html

just to get a glimmer of some of the things that are involved.

Why on earth would you need to do this anyway? A flexible layout can accommodate elements of various sizes, and the textarea element is specifically designed to accommodate various content without throwing off the basic layout (much) in any browser.