Auto Expand Input and Textarea Based on Text Length

By | June 3, 2020

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

Share and Enjoy !

0Shares
0 0

Subscribe For Latest Updates

Sign up to best of PHP Code Solutions, informed analysis and opinions on what matters to you.
Invalid email address
We promise not to spam you. You can unsubscribe at any time.

3 thoughts on “Auto Expand Input and Textarea Based on Text Length

  1. Pingback: CSS Background Image Text Effect - PHPCODER.TECH

  2. Pingback: Create Date Picker using Materialize Framework - PHPCODER.TECH

  3. Pingback: Best User Login Page Design Using Neumorphism - PHPCODER.TECH

Leave a Reply

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