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.

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
My name is Bikash Kr. Panda. I own and operate PHPCODER.TECH, my native place in Odisha. I am a Web Programmer by profession and working on more than 50 projects to date. My passion is working on the web-based project using PHP and relate to all CMS and frameworks which is based on PHP.
Posts created 178

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

Leave a Reply

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

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top
mariobet - supertotobet - escort - milanobet giriş - gizabet giriş -
perabet giriş
- betkanyon giriş -

jojobet giriş

We are now accepting guest posting and creation of back-links.
This is default text for notification bar