Home Web Development JavaScript JavaScript TextArea Auto Resize Program | Resize Text Area Automatically

JavaScript TextArea Auto Resize Program | Resize Text Area Automatically

March 27, 2020

2876

How we can create a Textarea field which will automatically resize according to text length? Solution: See this JavaScript TextArea Auto Resize Program, Resize Text Area Automatically.

Previously I have shared some text related programs, but this is a textarea resize program. Basically, The HTML<textarea> tag represents a multi-line plain-text editing control where users can put texts. For example a comment on a review or feedback form. You can choose a fixed size of the text area, but when the content will long then the textarea will scrollable. Which is terrible for user interface (UI) design. The best way to resolve that is, create a flexible Textarea field with the auto-resize feature.

Today you will learn to create a program for Resize Text Area Automatically. Basically, there is a heading text and a text area box with some placeholder texts. There is a minimum height value of the Textarea field, but when the text will cover the whole area then it will extend according to the content’s length. And when you will starting to erase text then its size will decrease, by erasing all texts it will become its minimum height version.

So, Today I am sharing JavaScript TextArea Auto Resize Program. There I have used HTML to create the elements, CSS for styling, and JavaScript for functioning. This is an important program for a good website or UI design, but most of the beginners miss these types of things. You can use maximum character values otherwise, you can use this program on your websites.

If you are thinking now how this Textarea resize program actually is, then see the preview given below.

Preview Of Resize Text Area Automatically

See this video preview to getting an idea of how this program looks like.

https://webdevtrick.com/wp-content/uploads/text-area-resize.mp4?_=1

Live Demo

Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

JavaScript TextArea Auto Resize Program Source Code

Before sharing source code, let’s talk about it. First I have created the main section using HTML <main> tag and placed a Textarea tag inside it. The <textarea> tag contains a class name and some placeholder texts. Only these few things are in the HTML file because this program is about the only textarea. Also in the HTML file, I have linked other files like CSS and JavaScript file.

Now using CSS I have placed heading and textarea field in the center, as you can see in the preview. With CSS I gave basic values like size, position, margin, padding, etc. I gave a max-width value and a min-height value to the textarea, also gave a colorful border. There I have used a google font in the program to styling the texts.

JavaScript handling here the main feature auto resize the textarea function in the program. JS fetched the textarea using document.querySelectorAll command. There I have used JS for loop for{} command to get all text and increase height automatically. It changing HTML dynamically using .innerHTML command.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>JavaScript Textarea Auto-Resize | Webdevtrick.com</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Sen:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">

</head>
<body>

<main>
  <h2>Textarea Auto-Resize with JavaScript</h2>
  <textarea placeholder="Type many lines of texts in here and you will see magic stuff" class="txtar"></textarea>
</main>

<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Textarea Auto-Resize | Webdevtrick.com</title>

</head>

<body>

<main>

<h2>Textarea Auto-Resize with JavaScript</h2>

</main>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
body {
  font-family: 'Sen', sans-serif;
  padding: 0 20px;
  background-color: #f3f3f3;
}

h2 {
  font-size: 30px;
  color: #212121;
}

main {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}

textarea {
  color: #444;
  padding: 5px;
  border: 2px solid crimson;
}

.txtar {
  width: 100%;
  max-width: 500px;
  min-height: 100px;
  font-size: 16px;
  overflow: hidden;
  line-height: 1.4;
  font-family: 'Sen', sans-serif;
}

/* Code By Webdevtrick ( https://webdevtrick.com ) */

body {

font-family: 'Sen', sans-serif;

padding: 0 20px;

background-color: #f3f3f3;

}

h2 {

font-size: 30px;

color: #212121;

}

main {

text-align: center;

margin: 0 auto;

max-width: 800px;

}

textarea {

color: #444;

padding: 5px;

border: 2px solid crimson;

}

.txtar {

width: 100%;

max-width: 500px;

min-height: 100px;

font-size: 16px;

overflow: hidden;

line-height: 1.4;

font-family: 'Sen', sans-serif;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
let textareas = document.querySelectorAll('.txtar'),
    hiddenDiv = document.createElement('div'),
    content = null;

for (let j of textareas) {
  j.classList.add('txtstuff');
}


hiddenDiv.classList.add('txta');


hiddenDiv.style.display = 'none';
hiddenDiv.style.whiteSpace = 'pre-wrap';
hiddenDiv.style.wordWrap = 'break-word';


for(let i of textareas) {
  (function(i) {

    i.addEventListener('input', function() {
      
      i.parentNode.appendChild(hiddenDiv);
      
      i.style.resize = 'none';
      
      i.style.overflow = 'hidden';

      content = i.value;

      content = content.replace(/\n/g, '<br>');
      
      hiddenDiv.innerHTML = content + '<br style="line-height: 3px;">';

      hiddenDiv.style.visibility = 'hidden';
      hiddenDiv.style.display = 'block';
      i.style.height = hiddenDiv.offsetHeight + 'px';

      hiddenDiv.style.visibility = 'visible';
      hiddenDiv.style.display = 'none';
    });
  })(i);
}

// Code By Webdevtrick ( https://webdevtrick.com )

let textareas = document.querySelectorAll('.txtar'),

hiddenDiv = document.createElement('div'),

content = null;

for (let j of textareas) {

j.classList.add('txtstuff');

}

hiddenDiv.classList.add('txta');

hiddenDiv.style.display = 'none';

hiddenDiv.style.whiteSpace = 'pre-wrap';

hiddenDiv.style.wordWrap = 'break-word';

for(let i of textareas) {

(function(i) {

i.addEventListener('input', function() {

i.parentNode.appendChild(hiddenDiv);

i.style.resize = 'none';

i.style.overflow = 'hidden';

content = i.value;

content = content.replace(/\n/g, '<br>');

hiddenDiv.innerHTML = content + '<br style="line-height: 3px;">';

hiddenDiv.style.visibility = 'hidden';

hiddenDiv.style.display = 'block';

i.style.height = hiddenDiv.offsetHeight + 'px';

hiddenDiv.style.visibility = 'visible';

hiddenDiv.style.display = 'none';

});

})(i);

}

That’s It. Now you have successfully created JavaScript TextArea Auto Resize Program, Resize Text Area Automatically. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.