Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Facebook Like Auto Expanding Textarea Using JavaScript And CSS.

Thursday, Sep 28, 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

<html>
<head>
  <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;
      if(val>cal)
      {
	     h=h+50
	     document.getElementById("t1").style.height=h;
      }
    }

  </script>
</head>

<body>

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

</body>
</html>

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.

body
{
background-color:#5882FA;
font-family:helvetica;
}
h1
{
	color:#08088A;
	font-size:35px;
	text-align:center;
	margin-top:70px;
}
textarea
{
	width:400px;
	height:100px;
	overflow:hidden;
	border-radius:5px;
	padding:10px;
}

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.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.