Resize Textarea to fit Content

#jquery

#ux

#userexperience

#textarea

#html

When users type and add or remove new lines the textarea re-sizes to fit the same number of lines

$('#content').on( 'change keyup keydown paste cut', 'textarea', function (){
    $(this).height(0).height(this.scrollHeight);
}).find( 'textarea' ).change();

Check dat fiddle
http://jsfiddle.net/C8e4w/1/

Written by Mark Vaughn

Say Thanks

Respond

Related protips

JavaScript iterate through object keys and values

590.8K

jQuery .find and .closest are your best friends

491K

jQuery: When to use $(document).ready() and when $(window).load()

225.4K

2 Responses

Add your response

techygypo

Excellent thanks :)
I have tweaked this a little to use it as an extension:

$.fn.extend({
autoresize: function () {
$(this).on('change keyup keydown paste cut', function () {
$(this).height(0).height(this.scrollHeight);
}).change();
}
});

$('#mytextarea').autoresize();

over 1 year ago ·

AndrewChamp

I signed up just tell you thank you for sharing, Mark. It was exactly what I needed. I added #content{overflow:hidden;} to get rid of the quick scroll bar that shows up when it resizes.

over 1 year ago ·