Sometimes, we want to expand a text area when clicked on with JavaScript.

In this article, we’ll look at how to expand a text area when clicked on with JavaScript.

How to expand a text area when clicked on with JavaScript?

To expand a text area when clicked on with JavaScript, we can call the animate method.

For instance, we write:

<textarea rows="1" cols="10"></textarea>

to add a text area.

Then we write:

const textarea = document.querySelector('textarea')
textarea.onfocus = () => {
  textarea.animate({
    height: "4em"
  }, 500);
};

to select the text area with document.querySelector.

Then we set the onfocus property of it to a function that calls textarea.animate to set the height of it to 4em for 500 milliseconds.

Conclusion

To expand a text area when clicked on with JavaScript, we can call the animate method.