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 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.

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:

• HTML PDF Embed Operation
• Selection in CSS | CSS ::selection
• JavaScript Array | Array length, push, pop, shift, unshift, IndexOf, forEach

Happy Coding..!