Textarea problem

I am trying to expand the textarea but fail somehow. It gets larger than the content. Please see this jsfiddle. Why does it fail?

EDIT: Seems my question is not clear enough so let me put some clearness on it. What I want is to turn any textarea (that may have scrollbars because its content overflows) into the textarea that has such dimensions that the scrollbars disappear because the content does not overflow anymore.

Why does my solution not work? That's what I am wondering. If I remove that "thisissomeverylongwordintheworld", it does work as intended.

EDIT 2: I just tested the jsfiddle in Chrome and the textarea has a scrollbar... so I g开发者_Go百科uess there is some problem with scrollWidth and scrollHeight... or I don't understand them right? :)

Maybe you should use a DIV with contenteditable=true:

http://jsfiddle.net/6S77z/6/

This question is still not clear. But probably you (if not now, then you will after you get the idea) want the autogrow textarea plugin. This is a script, that is running on my website, the original author is unknown. But it works..

Live demo: http://jsfiddle.net/hobobne/6S77z/9/
(Try to delete your text, it will adopt to your actions [adding or removing text])

Point is, that when the document (your website) is loaded, it will calculate the text amount inside the textarea. Then it will autogrow the textarea fitting the text amount/length. It doesn't produce a scrollbar (meats your requirement), doest use css (your requirement) and doesn't leave any extra space (well, one line.. at the bottom, that is necessary.)

I marked where the plugin starts and ends.. Also where is the trigger:

$('textarea').autogrow();

PS: You can set the width of the textarea with CSS or with cols="".

EDIT: Why doesn't your code work:

What is not working? The code is meant to calculate the texts amount and adjust the textarea accordingly. That is what it does. There is no scrollbar on the textarea:

There is, however, a scrollbar on the window..as the textarea is very long.. Do you want no scrollbars on textarea, and also no scrollbars on the window?

That is not possible! I mean, your requirements are:

• No css
• No scrollbar on the textarea critical
• No scrollbar on the window critical
• Cant change the textareas width critical
• Cant delete any text critical

Those requirements mean, NOT POSSIBLE. You must give out on some critical requirement if you wish to continue.. But no scrollbars whatsoever, is not possible in any way.. its against physics.. You cannot put a bigger box inside smaller box, without changing the boxes dimensions!