FormTextResizer: Bookmarklet for resizing textareas and text fields

25 August 2006

32 comments

A Blue Perspective: FormTextResizer: Bookmarklet for resizing textareas and text fields

» FormTextResizer bookmarklet «

OK, you're all sick of hearing about my holidays, and so am I. So, to re-stretch my brain I thought I'd write down a little bookmarklet that's been bouncing around in my head for a while.

You know when you're typing an essay into someone else's blog comment form, or you're putting all ten of your middle names into a registration form, and you run out of form field space?

Yeah, it's a bitch to go back and edit, because your text has scrolled off the screen. Well, with the FormTextResizer bookmarklet you can resize that little sucker to be as big as you want.

After you execute the bookmarklet, any textarea or text field will display a resize cursor when you mouseover it, and to resize a particular field, you click-hold-drag. The field will resize in real-time, so you can see how far you have to go. Once you release, the bookmarklet's turned off, so you can focus and type to your heart's delight. Textareas can be resized in both dimensions, text fields only horizontally. Safari won't display the cursor unless you hit the element's border, but you'll still be able to resize it.

Right-click here and "Bookmark" FormTextResizer to access it anywhere, or click the link to try it out.

Note: Internet Explorer places a restriction upon bookmark URL lengths, so use this Internet Explorer bookmarklet, which links to a script on my server.

Go on, try it out. Yeah, that's it. Click the link. Scroll ... scroll ... there's the comment form. Do it!

Tested in Firefox 1.5.0.6 (Win & Mac), Internet Explorer 5+ (Win), Opera 9.01 (Win), Safari 2.0.3.

Categories

, , ,

Comments

  1. 1/32

    Steve Ganz commented on 25 August 2006 @ 05:04

    Brilliant!

  2. 2/32

    Tanc commented on 25 August 2006 @ 05:14

    Really cool. Thanks.

  3. 3/32

    Nate K commented on 25 August 2006 @ 05:24

    This is very handy, thanks for the bookmarklet! Working fine in Safari.

  4. 4/32

    David Zuch commented on 25 August 2006 @ 06:06

    This is awesome! Thanks!

  5. 5/32

    Scott Johnson commented on 25 August 2006 @ 06:28

    I just resized every text field in this comment form, and it worked quite well. Nice bookmarklet!

  6. 6/32

    Elliot Swan commented on 25 August 2006 @ 06:33

    Dude, this rocks.

  7. 7/32

    Jonathan Snook commented on 25 August 2006 @ 06:43

    Wow, well done! Thanks Cameron. I'll be using this heavily.

  8. 8/32

    Espen Liland commented on 25 August 2006 @ 07:44

    Absolutely brilliant. I have to have this on my blog.

    *note to self*
    1. Become a Javascript guru
    2. Make a similar script that doesn't require clicking, and only works when dragging the border of the field (like any Windows window).

  9. 9/32

    Sébastien Guillon commented on 25 August 2006 @ 07:50

    This is absolutely great!

    Works fine here on Opera 9.01 on Win XP Pro.

    Notes:
    Opera won't show the resize cursor on a textarea if you cross the scroll bar upon entering its surface.

    I had some CSS errors on the Opera console when trying to push the script a little; I selected a textarea and resized it to offscreen using the mouse wheel (Invalid value for property: height on line 1).

    Just hope this helps, otherwise I just love it, thanks!

  10. 10/32

    Ed Eliot commented on 25 August 2006 @ 08:37

    Great stuff! I always forget how many cool things one can achieve with something as simple as bookmarklets.

  11. 11/32

    Ben Buchanan commented on 25 August 2006 @ 09:30

    That's nifty! Worked really well on the comment form; although your site search form got a bit strange (Opera 9.01 on WinXP).

    I'm actually wondering if this could also be embedded into forms to allow users to resize the inputs as they go. The interface/usability aspect might be a bit tricky - ie. how to explain the process to users - but it would be pretty cool.

  12. 12/32

    Dmitry Baranovskiy commented on 25 August 2006 @ 09:43

    That is brilliant idea, Cameron. And nice implementation too.
    (Added to bookmarks)

  13. 13/32

    David McDonald commented on 25 August 2006 @ 10:07

    Very useful. How difficult would it be to make it into a Firefox extension?

  14. 14/32

    Sam commented on 25 August 2006 @ 11:51

    This is simply awesome. Bookmarked! (pun shamelessly intended)

  15. 15/32

    juan pablo commented on 25 August 2006 @ 12:39

    Cameron: YOU-ARE-THE-MAN!, Absolutely brilliant.

  16. 16/32

    The Man in Blue commented on 25 August 2006 @ 13:16

    Hmmm ... a Firefox extension. I suppose it could be done, but I've never made one. I suspect it'd be a bit different than normal JavaScripting.

  17. 17/32

    Adrian Kostrubiak commented on 25 August 2006 @ 16:45

    Wow, this is really neat!
    Thanks for coming up with something so cool.

  18. 18/32

    gavin commented on 25 August 2006 @ 18:09

    Seems not to work for some WYSIWYG editors?

  19. 19/32

    The Man in Blue commented on 25 August 2006 @ 18:11

    Wouldn't work for WYSIWYG editors because they're not form fields.

  20. 20/32

    Jon commented on 25 August 2006 @ 21:37

    Welcome back :) Great bookmarklet!

  21. 21/32

    Harmen Janssen commented on 26 August 2006 @ 04:00

    Very nice post!

    I've got functionality just like this implemented on my website. The difference is that I use buttons to resize a textarea with a certain amount of pixels every click.

    Welcome back :)

  22. 22/32

    Rosano Coutinho commented on 26 August 2006 @ 14:53

    That is just awesome! Why didn't I think of that?

  23. 23/32

    Sime commented on 26 August 2006 @ 20:46

    I much prefer “Edit in TextMate” input manager ;) But this is great stuff too!

  24. 24/32

    Ivar commented on 27 August 2006 @ 00:32

    Nice!
    I will have to implement this as well.

  25. 25/32

    Bryan Price commented on 27 August 2006 @ 02:02

    This actually works on Blogger (even though it's a bit of a pain to implement) via Firefox.

    I dragged it onto my button menu, but of course Blogger doesn't allow you access to any menus. I went to my original window, copied the code from the button, went back to the Blogger windows, ctrl-L'ed, pasted the code in, and I could resize the text box! Blogger will adjust the box if you make the window wider, but making the window deeper doesn't do anything.

    I just made the keyword tr, so now I can ctrl-L, type tr, and have it do it's magic.

    Thanks!

  26. 26/32

    Goulven commented on 27 August 2006 @ 03:43

    Really cool. The cursor change is very slight, and I didn't notice inputs were resizable as well before reading the comments.
    I've added some colour...
    No C-change in sight, and this assumes that most inputs and areas use a white background.

    Feel free to edit this comment if it breaks the page. Here goes :

    Modified bookmarklet

  27. 27/32

    João Makray commented on 28 August 2006 @ 11:41

    I've converted the script to a non-bookmarklet version.
    Check it out: http://www.joaomak.net/util/textareaResizer/

  28. 28/32

    Andrew commented on 28 August 2006 @ 11:46

    Hmm, it's good, but needs more Scrabble ;)

  29. 29/32

    Tudor commented on 28 August 2006 @ 19:40

    Great work and thanks for sharing!

    Just a quickie: similar to what Sébastien (comment 9) noted, a click on the scroll bar will trigger the document's mousedown event handler, so by the time you reach the form, nothing happens anymore. (Firefox 1.5.0.6, WinXP)

    Anyway, I love it, thanks again.

  30. 30/32

    bankr commented on 31 August 2006 @ 18:01

    I've been looking for this for a long time! Thanks.

  31. 31/32

    Goulven Champenois commented on 1 September 2006 @ 03:14

    I noticed it doesn't work on services like GMail. Probably linked to inputs being inside iframes.
    Do you think the code could "see" inside iframes?

  32. 32/32

    The Man in Blue commented on 1 September 2006 @ 03:19

    Yes, it probably could "see" inside the iframes. I'll have a think about whether I want to include this functionality.

  33. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed