Moshe pointed me to a nice part of Interface for jQuery where it can auto-expand textareas as you type in them, up to a certain pixel size. Nice, but we can do better.
The attached patch is based on the interface code, but changes the behaviour so it:
1) Auto-expands down until it reaches the bottom of the browser view.
2) Keeps expanding and scrolling along, as long as the textarea is shorter than the browser view.
3) Stops expanding and scrolling as soon as the textarea reaches the browser view height.
I also fixed some bugs:
- Don't stretch the page scrollbar length when there is a lot of content.
- Fix measurement mismatch due to missing line-height style.
- Add tiny delay to ensure we have the real contents, including the last keypress/paste.
- Don't do anything for textareas with lots of content (we are already at maximum size in this case).
- Don't expand more than once every 250ms to avoid sluggish typing.
This behaviour is part of the #resizable toggle. IMO it is still useful to have the grippie in combination with auto-expansion.
Tested in Safari and Firefox OS X.
Comments
Comment #1
Steven commentedCrap, Interface used tabs in the code. Removed them.
Comment #2
moshe weitzman commentedworks as advertised on OSX opera. i verified steven's browsers as well ... we need some IE testing.
Comment #3
Steven commentedVideo here: http://acko.net/blog/expanding-textareas
Comment #4
wim leersVery nice, Steven & Moshe!
Subscribing.
Comment #5
alanburke commentedVery Cool
Tested on IE6 and IE7... and... it works!
[Possibly seperate issues
1. Are we testing on below IE6?
Its actually works on IE 5.5... but Garland doesn't [sidebars missing]
2. Could we now reduce the default height of the body textarea?
]
Comment #6
toemaz commentedI support this feature. Nice work again.
Comment #7
dries commentedI support this too. Small but incredible convenient improvement.
Comment #8
Zen commentedNice one :)
It would be nice if the following can be addressed / confirmed:
Thanks.
-K
Comment #9
Steven commentedI don't think expanding up first makes sense. The natural expectation is that if you press enter, you go down. This is the case right until when the textarea reaches the bottom.
Comment #10
Steven commentedOh and also fixed it so that it expands when you hit enter, not after you type the first character on a new line.
Comment #11
Zen commentedAs alanburke stated earlier, the node body field can be made smaller due to this patch. Perhaps, that can be included right here.
Thanks,
-K
Comment #12
Steven commentedOr you could help out *sigh*. Isn't it fun to develop core features everybody wants but nobody seems to work on?
Comment #13
Zen commentedI would. But I don't grok jQuery yet, sorry.
-K
Comment #14
BioALIEN commentedNice one Steven, this solves a big inconvenience indeed.
Just a thought, how would this patch behave when a user adds WYSIWYG modules?
Comment #15
Steven commentedWYSIWYG modules should disable the #resizable behaviour already. This patch has no effect on them.
Comment #16
jacauc commentedI like this a LOT! +many
Will apply the patch and do some testing in my devel environment
Thanks!
Comment #17
jacauc commentedWhen the scrollbar appears in Firefox 2, and I continue typing, the added text will be added to the bottom of the textarea, but the scrollbar stays at the top... In other words, the user cannot see what is being typed, except if he scrolls down.
I also noticed that the scrollbar is redrawn (it flickers) every time I press enter after this. This might be the related. Every time it is redrawn it is by default at the top as opposed to at the bottom..
rather difficult to explain this, but I can provide more info if required.
Thanks
jacauc
Comment #18
wolfderby commentedSubscribing
Comment #19
anders.fajerson commentedLet's see if we can get this into Drupal 6. See video above for a visual presentation.
Re-rolled for HEAD. Also adressed:
* "Text jittering"/unresponsivness reported above - I had to revert to no easing since it was the cause. I *really* tried making it work, but I think this is good enough.
* Textarea shrinks when all text is deleted.
* Safari (3 on Win) was not expanding like the rest - was a bit jumpy. Added an extra check for that. Needs testing on Mac.
* Added a little more padding so "Split summary at cursor" and "Input format is visible" when fully expanded.
* It now checks if the textarea has been resized manually, then it doesn't auto-expand.
* Smaller body field.
Tested on Firefox 2 (Win/Linux), Opera 9 (Win), Safari 3 (Win) IE6/7
Comment #20
catchVery nice idea.
However, firebug says:
for every character I type. Also using the grippy once disables this entirely - I understand the idea behind having both the grippy and the auto-resize, but I'm not convinced about it behaving like that if both happen to be used together.
Comment #21
anders.fajerson commentedThanks for the review! Make sure you force refresh the browser, the error is probably a caching issue. To me it makes sence that the manual resize takes preference over the auto-exand - the user knows best so to speak.
Comment #22
catchYes you're right, a forced browser refresh worked. On second thoughts, I can see how it'd be really annoying to have it change the textarea size after resizing it, and can't think of a clean way it could be reset to auto-resize on the same page. In that case needs review on Mac/linux etc.
Comment #23
chx commentedComment #24
elyobo commentedI like the sound of this; is there any chance you can release the jQuery code as a pure jQuery plugin as well? While I use Drupal for my own site, I'm also developing for some non-Drupal sites that this would be useful on.
Comment #25
lilou commentedPatch non longer apply in collapse.js (Cannot apply hunk @@ 12 ), textarea.js (Cannot apply hunk @@ 9 ) and node.pages.inc.
Comment #26
catchMoving to usability.
Comment #27
George2 commentedi made a module like this for 6 and been thinking about porting the features of it to 7. my original intention for the module was to allow the admin to resize the row count of the body textarea for nodetypes, then it grew to include the comment, and cck fields. there's also an option to remove the 'split summary at cursor' button, and whether the textarea should have a grippie or not.
allowing the admin to choose how the field should be resized for the textarea i think is more beneficial, then just adding a default resize imo.
Comment #28
BarisW commentedAdded tags
Comment #29
mdlamar commenteddrupal 6.14 with textarea-grow_2.patch from above. here is the output:
patching file misc/textarea.js
Hunk #1 FAILED at 12.
Hunk #2 FAILED at 29.
2 out of 2 hunks FAILED -- saving rejects to file misc/textarea.js.rej
patching file misc/drupal.js
Hunk #1 succeeded at 229 (offset 2 lines).
patching file misc/textarea.js
Hunk #1 FAILED at 1.
Hunk #2 FAILED at 25.
2 out of 2 hunks FAILED -- saving rejects to file misc/textarea.js.rej
patching file modules/node/node.pages.inc
Hunk #1 FAILED at 247.
1 out of 1 hunk FAILED -- saving rejects to file modules/node/node.pages.inc.rej
Comment #30
Wolfflow commentedSubscribing
Comment #31
muriqui commentedComment #32
deviantintegral commentedI'm marking this as a duplicate of #432730: Resizable textarea fields that expand and shrink to fit entered text as that issue has a newer patch.