✖

All TalkersCode Topics

Follow TalkersCode On Social Media

Facebook Like Auto Expanding Textarea Using JavaScript And CSS

Last Updated : Apr 15, 2022

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

Facebook Like Auto Expanding Textarea Using JavaScript And CSS

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Latest Tutorials