How to make a textarea that dynamically adjusts size based on amount of text inputted (using pure JavaScript, without jQuery)

Question

How to make a textarea that dynamically adjusts size based on amount of text inputted (using pure JavaScript, without jQuery)

As a server-side developer, I am venturing into the world of vanilla JS to expand my skillset.

My current challenge involves creating a form where textareas are initially hidden behind button clicks and resize as more text is entered. This task is pushing the boundaries of my expertise, but I'm determined to tackle it on my own for learning purposes.

Here's my progress so far.

Picture a forum where users post content with a "reply" button underneath. Clicking this button reveals a basic textarea for typing responses. Here's the simple JavaScript code I used:

var replyBtns = document.querySelectorAll('[id=rep]');

for(var i = 0; i < replyBtns.length; i++) {
 replyBtns[i].addEventListener('click', function(e) {
   e.preventDefault();
   var textarea = document.getElementById("reply-message");
   if (textarea) { textarea.parentNode.removeChild(textarea); }
   var replyBox = document.createElement('textarea');
    replyBox.setAttribute('id', 'reply-message');
    replyBox.setAttribute('placeholder', 'Reply');
   this.parentNode.insertAdjacentElement('beforeend', replyBox);
 }, false);
}

This JavaScript snippet creates a text area in the HTML, paired with the following CSS:

textarea#reply-message {
  display: block;
  border: none;
  color:#306654;
  font-size:120%;
  padding: 5px 10px;
  line-height: 20px;
  width:550px;
  height: 20px;
  border-radius: 6px;
  overflow: hidden;
  resize: none;
}

The system works smoothly.

Moving forward, my next goal was to make the textarea resize dynamically as the text surpasses its initial size. To achieve this, I followed these steps:

Retrieve the content within the textarea
Create an invisible clone div
Style the clone to mimic the textarea's dimensions and typography
Copy the content into the clone
Determine the height of the clone
Adjust the height of the textarea accordingly

This approach capitalizes on a div element's inherent ability to expand based on its content height. Credit goes to this blog post for enlightening me on this technique.

Below is the JavaScript implementation of the aforementioned method:

let txt = document.getElementById('reply-message'),
    hiddenDiv = document.createElement('div'),
    content = null;

hiddenDiv.classList.add('hiddendiv');

document.body.appendChild(hiddenDiv);

txt.addEventListener('keyup', function () {

  content = this.value;
  hiddenDiv.innerHTML = content + '\n\n';
  this.style.height = hiddenDiv.getBoundingClientRect().height + 'px';

}, false);

Define hiddendiv as follows:

.hiddendiv {
  position: absolute;
  left: -9999px;
  visibility: hidden;
  white-space: pre-wrap;
  width: 550px;
  height: 20px;
  font-size: 120%;
  padding: 5px 10px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

However, I need to ensure that this JavaScript snippet only executes once the textarea actually exists.

Currently, it runs upon page load, without any impact since textareas have not yet been created. How can I make sure it activates only after their creation? As a novice in JavaScript, I'm struggling with this concept. Any guidance would be greatly appreciated.

javascript

Answer 1

Answer №1

Although not directly addressing your query, consider restructuring your code for similar outcomes.

Ensure to attach the event listener to your textarea during its creation process before incorporation into the page.

Incorporate code resembling this in your initial segment of JavaScript:

replyBox.setAttribute('placeholder', 'Reply');
replyBox.addEventListener('keyup', function () {
    /* implement event handling here */
}, false);

An alternative method for managing these tasks would involve transferring all actions related to configuring your textareas to a distinct function.

function setUpReplyBox(replyBox) {
    replyBox.setAttribute('id', 'reply-message');
    replyBox.setAttribute('placeholder', 'Reply');

    hiddendiv.createElement('div');
    content = null;

    hiddendiv.classList.add('hiddendiv');
    document.body.appendChild(hiddenDiv);

    replyBox.addEventListener('keyup', function () {
        content = this.value;
        hiddenDiv.innerHTML = content + '\n\n';
        this.style.height = hiddenDiv.getBoundingClientRect().height + 'px';
    }, false);
}

Invoke this function right after producing the item at

var replyBox = document.createElement('textarea');
setUpReplyBox(replyBox);
this.parentNode.insertAdjacentElement('beforeend', replyBox);

Answer 2

Although not directly addressing your query, consider restructuring your code for similar outcomes.

Ensure to attach the event listener to your textarea during its creation process before incorporation into the page.

Incorporate code resembling this in your initial segment of JavaScript:

replyBox.setAttribute('placeholder', 'Reply');
replyBox.addEventListener('keyup', function () {
    /* implement event handling here */
}, false);

An alternative method for managing these tasks would involve transferring all actions related to configuring your textareas to a distinct function.

function setUpReplyBox(replyBox) {
    replyBox.setAttribute('id', 'reply-message');
    replyBox.setAttribute('placeholder', 'Reply');

    hiddendiv.createElement('div');
    content = null;

    hiddendiv.classList.add('hiddendiv');
    document.body.appendChild(hiddenDiv);

    replyBox.addEventListener('keyup', function () {
        content = this.value;
        hiddenDiv.innerHTML = content + '\n\n';
        this.style.height = hiddenDiv.getBoundingClientRect().height + 'px';
    }, false);
}

Invoke this function right after producing the item at

var replyBox = document.createElement('textarea');
setUpReplyBox(replyBox);
this.parentNode.insertAdjacentElement('beforeend', replyBox);

Answer 3

Answer №2

Be sure to keep an ear out for the domContentLoaded Event

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("The DOM has been fully loaded and parsed");
});

For more information, check out this link: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

Answer 4

Be sure to keep an ear out for the domContentLoaded Event

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("The DOM has been fully loaded and parsed");
});

For more information, check out this link: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

Answer 5

Answer №3

Consider the possibility of using a div element with contenteditable attribute instead of a textarea, which may simplify your tasks.

#editor {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    padding: 2px;
    width: 400px;
}

<div id="editor" contenteditable>this is an editable div</div>

Answer 6

Consider the possibility of using a div element with contenteditable attribute instead of a textarea, which may simplify your tasks.

#editor {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    padding: 2px;
    width: 400px;
}

<div id="editor" contenteditable>this is an editable div</div>

Answer 7

Answer №4

Have you heard about the autosize plugin? You can find it here

To understand how to use it, check out the source code on github.

If your code works on page load but not during text updates, make sure to call your resize function on keyup, resize, and input events.

window.addEventListener('resize', yourFunc);
textarea.addEventListener('paste', yourFunc);
textarea.addEventListener('keyup', yourFunc);

You can also follow a simpler method explained here

function auto_grow(element) {
    element.style.height = "5px";
    element.style.height = (element.scrollHeight)+"px";
}

textarea {
    resize: none;
    overflow: hidden;
    min-height: 50px;
}

<textarea onkeyup="auto_grow(this)"></textarea>

Answer 8

Have you heard about the autosize plugin? You can find it here

To understand how to use it, check out the source code on github.

If your code works on page load but not during text updates, make sure to call your resize function on keyup, resize, and input events.

window.addEventListener('resize', yourFunc);
textarea.addEventListener('paste', yourFunc);
textarea.addEventListener('keyup', yourFunc);

You can also follow a simpler method explained here

function auto_grow(element) {
    element.style.height = "5px";
    element.style.height = (element.scrollHeight)+"px";
}

textarea {
    resize: none;
    overflow: hidden;
    min-height: 50px;
}

<textarea onkeyup="auto_grow(this)"></textarea>

How to make a textarea that dynamically adjusts size based on amount of text inputted (using pure JavaScript, without jQuery)

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Retrieve the most recent tweet from a user's timeline using the twit npm package

Scrolling does not function properly on Android devices when utilizing skrollr.js in conjunction with multiple div elements containing the id "skrollr-body."

Ways to access information received from AngularJS in a different Javascript file

WebGL annotations failing to display on the webpage

Can we use an open-ended peer version dependency in package.json?

What is the best way to extract information from a dynamically generated input field using vanilla JavaScript?

Image not yet clicked on the first try

Testing of AngularJS Controller using Jasmine and Karma: "Error - Unable to read property 'then' of undefined"

Solution: The issue where the children's onChange event was not updating the parent in Ant Design was discovered to be due to the Select and Table components nested inside a Tab not changing according to the pageSize

The code is slicing data, but the changes are not reflecting in the user interface

Effortless Scrollspy with a custom Navigation Component, no Bootstrap needed

Identifying issues in jQuery code - What could be causing this error?

Creating a mock AJAX response using JSFiddle and jQuery

having difficulty transmitting parameter to angular directive

What is the best method for transferring data from the first table to the second table in Angular?

How can one determine when an animation in Three.js has reached its conclusion?

Implementing the row delete function in MUI DataGrid using JavaScript

Hover-over functionality not functioning properly on select images

The Javascript function will keep on executing long after it has been invoked

Ways to set a timeout for a hyperlink?