How to Creating a textarea with auto-resize

Creating a textarea with auto-resize is not a easy task task. We can achieve auto resize textarea through JavaScript or jQuery. But in this article we not use  jQuery, we use pure javaScript. Benefit of pure JavaScript are, website speed performance not effected.

How to Creating a textarea with auto-resize

Add a pure JavaScript in your html file after </body> body tag close or in your main JavaScript file.

textarea = document.getElementById("txtresize"); 
textarea.addEventListener('input', output, false); 

function output() { 
   this.style.height = 'auto'; 
    this.style.height = this.scrollHeight + 'px'; 
} 

First, we create a id called txtresize and paired with your textarea. ID txtresize grab the style property in your CSS. After that add a event listener method. When ever any text added in your textarea event listener run.

textarea auto-resize

When a event listener run it call back function called output. We add a output function blow the event listener. The output function add the style height auto. When we add a text in the textarea height of the textarea updated automatically.

<!DOCTYPE html> 
<html> 

<head> 
	 
	<style> 
		#txtresize { 
			display: block; 
			overflow: hidden; 
			resize: none; 
		} 
	</style> 
</head> 

<body> 
	
	<textarea id="txtresize"> 
		add your text
	</textarea> 
	
	<script type="text/javascript"> 
		textarea = document.getElementById("txtresize"); 
		textarea.addEventListener('input', output, false); 
	
		function output() { 
			this.style.height = 'auto'; 
			this.style.height = this.scrollHeight + 'px'; 
		} 
	</script> 
</body> 

</html> 

I've loved ❤ technology and always curious about new tech innovation. I've been a technology writer and passionate blogger for last 3 year and write How to guide to help people become a tech-savvy.

Leave a Comment