Textarea Auto Resize in HTML CSS & JavaScript

Hey friends, today in this blog you’ll learn how to Auto Resize Textarea using only HTML CSS & JavaScript. In the earlier blog, I have shared how to create Login Form Validation in HTML CSS & JavaScript, and now it’s time to create an auto resizable textarea using only a few lines of JavaScript codes.

Auto Resize Textarea means the height of the textarea automatically resizes according to its content. I have also set max-height for this Textarea, so it’ll start to scroll after the specified max-height. You may have noticed this type of auto resizable textarea in different messaging apps.

In this auto-resize textarea, as you can see in the preview image, there are shown two states of the textarea. The first one is the initial state and the second one is when you put some content in the textarea. When you start to type some characters in the textarea, it will automatically resize the height to fit its content.

See also  Auto Increase a Textarea with Javascript

Auto Resize Textarea in JavaScript [Source Codes]

To create Auto Resize Textarea in JavaScript. First, you need to create two Files: HTML & CSS files. After creating these files just paste the following codes into your file. You can also download the source code files of this auto resize textarea from the given download button.

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Coding By codeithub - youtube.com/codeithub -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Auto Resize Textarea in JavaScript | codeithub</title>
    <link rel="stylesheet" href="https://www.codeithub.com/auto-resize-textarea-html-css-javascript/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="wrapper">
      <h2>Auto Resize Textarea</h2>
      <textarea spellcheck="false" placeholder="Type something here..." required></textarea>
    </div>
    <script>
      const textarea = document.querySelector("textarea");
      textarea.addEventListener("keyup", e =>{
        textarea.style.height = "63px";
        let scHeight = e.target.scrollHeight;
        textarea.style.height = `${scHeight}px`;
      });
    </script>

  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(#4671EA, #AC34E7);
}
::selection{
  color: #fff;
  background: #4671EA;
}
.wrapper{
  width: 470px;
  background: #fff;
  border-radius: 5px;
  padding: 25px 25px 30px;
  box-shadow: 8px 8px 10px rgba(0,0,0,0.06);
}
.wrapper h2{
  color: #4671EA;
  font-size: 28px;
  text-align: center;
}
.wrapper textarea{
  width: 100%;
  resize: none;
  height: 59px;
  outline: none;
  padding: 15px;
  font-size: 16px;
  margin-top: 20px;
  border-radius: 5px;
  max-height: 330px;
  caret-color: #4671EA;
  border: 1px solid #bfbfbf;
}
textarea::placeholder{
  color: #b3b3b3;
}
textarea:is(:focus, :valid){
  padding: 14px;
  border: 2px solid #4671EA;
}
textarea::-webkit-scrollbar{
  width: 0px;
}

That’s all, now you’ve successfully created an Auto Resize Textarea using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

See also  How to Detect Browser in JavaScript

Leave a Reply

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