Good UX for website form is one of the key factor to increase the conversion rate of the website. One of it is by making your form minimal or making it form step or anything to make it look not too overwhelming.

But let say you have a single page form with lots of textarea? One thing you could maybe do, is to make it look slick by adjusting the height of textarea a little smaller however, when user put long text in it, the textarea would probably have scrollbar. Would it be cool to have it automatically increase depending how long the text the user is trying to put?

Here's how you can do it.

Let's start with a basic textarea.

<textarea class="js-textarea-auto"></textarea>

And a sample css that sets the mininum height to the textarea.

.js-textarea-auto { min-height:50px; resize:none; overflow:hidden; }

Then lastly the jQuery

$('.js-textarea-auto').on('keyup',function(e){
	if( $(this).outerHeight() > $(this).prop('scrollHeight')) {
		$(this).outerHeight(5);
	}
	$(this).outerHeight($(this).prop('scrollHeight'));
});

Now if you're not using jquery, here’s a pure javascript you can use instead.

let textareas = document.querySelectorAll('.js-textarea-auto');
textareas.forEach(elm=>{
	elm.addEventListener('keyup', function(e){
		if( this.offsetHeight > this.scrollHeight) {
			this.style.height=`5px`;
		}
		this.style.height=`${this.scrollHeight}px`;
	})
})