Saturday, December 18, 2010

jQuery expanding textarea

I've been using dojo for some time now as my default javascript toolkit. From some days I'm giving a look at jQuery becouse of its popularity. It's not always true that popular = good but it seems is not this the case. As soon as I started using it I've founded it easy, simple and clean. From dojo I often use the dijit TextArea widget. This widget is a nice beast that autoexpand itself to fit the text content inside. No scroll bars will be showed and it is really nice in some context. I've googled for a similar widget into the jQuery ecosystem but, to my surprise, I have not found anything equiparable in terms of quality. So in short, I decided to port the dojo one to jQuery.

Example:
Here an example (type some lines into the textarea below)




Usage
<script src="jquery.min.js" type="text/javascript">
</script>
<script src="jquery.exptextarea.js" type="text/javascript">
</script>

Now you can select a text area using jQuery selector and turn it into an expandable one

<textarea></textarea>
<script>
$('textarea').expandingTextArea();
</script>

Download
I've shared the code with you on github:
https://github.com/ferama/jquery-expanding-textarea/

8 comments:

  1. I'm going to try this out! Thanks!

    ReplyDelete
  2. I thought this was going to be perfect, but after running some tests I see it has a behavior that makes it not usable for my projects.

    The function always collapses the height to one line instead of the default row num or col height.

    Sometimes this is OK, but often you want a nice large text area to type in, that only expands when more rows are needed. (for example this comment box I am typing in now started with about 8 rows.)

    In fact if the textbox is only one row, users will not even know they can hit enter for more rows, and the wonderful functionality you programmed will be missed.

    Could you release a mod that initially renders the controls to their set height?

    ReplyDelete
  3. since this is a port from dojo widget, it not support the rows attribute and the height property as you can find here http://docs.dojocampus.org/dijit/form/Textarea

    Probably there is a way to add this feature.

    ReplyDelete
  4. Exactly what I was looking for, worked a charm, thanks. Slightly modified it to also resize the parent div which was surpsingly easy considering I have only been using jquery for a couple of hours!!

    ReplyDelete
  5. Marco: It worked perfect for what I was looking for (expanding a text area based on it's contents prior to showing it).

    Thanks for sharing this.

    ReplyDelete
  6. Jeremy, I wanted the same thing, so I patched his work. Let me know if you still want it.

    ReplyDelete
  7. @Vol7ron - I would be interested in knowing how to set the height of the text areas, if you could share it that would be great. John

    ReplyDelete