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/