Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

Facebook Like Auto Expanding Textarea Using JavaScript And CSS.

Friday, Apr 7, 2017

Tags:- JavaScript CSS

In This tutorial we will create a Facebook Like Auto Expanding Textarea using JavaScript and CSS.This textarea expands its height automatically when there is no space of writting,with the help of this there is no scroll bars in textarea.You may also like extract url data like facebook using PHP.

See Demo
facebook Like Auto Expanding Textarea

To create a Facebook Auto Expanding Textarea it takes only two steps:-

  1. Make a HTML file and define markup and script for Auto Expanding Textarea
  2. Make a CSS file and define styling for Auto Expanding Textarea

Step 1.Make a HTML filoe and define markup and script for Auto Expanding Textarea

We have to make a HTML file and named it textarea.html

  <link rel="stylesheet" type="text/css" href="textrarea_style.css">
  <script type="text/javascript">
    function check()
      var val=document.getElementById("t1").scrollHeight;
      var h=document.getElementById("t1").offsetHeight;
      var cal=parseInt(h)-2;



   <h1>Facebook Like Auto Expanding TEXTAREA Using JavaScript And CSS</h1>
   <textarea id="t1" onkeyup="check();" placeholder="Wtite Your Text.....">


In this step we make a textarea and we use onkeyup event which call the check function of javascript everytime after the key is pressed.In check() function we get the scrollHeight and offsetHeight to expand the textarea.scrollHeight function gets the total height available for text inside the textarea and it is always two pixels less than the height of textarea.For eg; If we have a textarea of height 100px than the scroll height is 98 and if the height of textarea is 50px then the scroll height is 48.You may also like login with facebook using PHP.

offsetHeight function is used to get the actual height of textarea and after that we get both the heights scrollheight and offsetHeight and then we do simple maths.If scrollHeight is greater then (offsetHeight-2) then increase the height of textarea by 50px.You may also like auto post on facebook using PHP.

Step 2.Make a CSS file and define styling for Auto Expanding Textarea

We make a CSS file and save it with name textarea_style.css.


Thats all, this is how to create a Facebook Like Auto Expanding Textarea Using JavaScript And CSS.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

Are You Starting A New Blog
Do You Want Best Web Hosting?

Try World's Best Web Hosting Provider BlueHost
At Just $3.95/mo

Hurry Up! Limited Time Offer

Yes, I Want To Check Out BlueHost

Check The World's Best SEO And All-In-One Marketing Toolkit
For Digital Marketing Professionals SEMRUSH