HTML/CSS

Auto Expand Input and Textarea Based on Text Length

We all are curious about how to auto expand input and Textarea based on text length. By default in both form element Textarea...

Written by Bikash · 1 min read >

We all are curious about how to auto expand input and Textarea based on text length. By default in both form element Textarea auto grow and also input box expands functionality is not available. 

On the other side, there is no simple CSS and HTML available for auto expand input height based on text length.

Auto Expand Input & Textarea Based on Text Length


So, today we discuss the functionality of auto expand input and Textarea based on text length using inline HTML element. 

Working step by step to do this task,

Auto Expand Input Height

  • Using Inline HTML element <span> with role attribute and contenteditable  attribute and CSS.
  • Using JavaScript, we take the input value and set it to the hidden span and increase the width as needed.

Source Code of Auto Expand Input Height based on Text Length

Here the live source code of Auto Expand Input Height based on Text Length,

See the Pen Auto Expand Input Height based on Text Length by Bikash Panda (@phpcodertech) on CodePen.

https://static.codepen.io/assets/embed/ei.js

Auto Resize Textarea

  • We check the number of line breaks and set the according to it and also using  <span> with role attribute and contenteditable  attribute and CSS.
  • With JavaScript also for textarea auto grow.

Source Code of  Auto Resize Textarea to Fit Content

Here the live source code of Auto Resize Textarea to Fit Content,

See the Pen Auto Resize Textarea to Fit Content by Bikash Panda (@phpcodertech) on CodePen.

I think you all guys are doing well with other methods. Please use it and let a comment below for more.

Here is the complete source code with live view for both auto expand input and Textarea based on text length functionality.

Also Check:

Happy Coding..!

Was this article helpful?
YesNo
Written by Bikash
My name is Bikash Kr. Panda. I own and operate PHPCODER.TECH. I am a web Programmer by profession and working on more than 50 projects to date. Currently I am working on the web-based project and all the CMS and frameworks which are based on PHP. Profile

4 Replies to “Auto Expand Input and Textarea Based on Text Length”

Leave a Reply

Your email address will not be published. Required fields are marked *