Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ❤ 💻
We are community of people that helps each other.

If you are beginner in IT field, you are more then welcome to ask questions, it will help you to learn faster. We are here to help you.

We are always beginner in something, we just need to remember it along the way.

there are no wrong questions - Ask Question

JavaScript - how to make textarea autogrow?

0 contributions
3 points

Using JavaScript it is possible to make textarea element autogrowing in following way.

1. Scroll height detection examples

Approach presented in this ection uses following fact: when height is set as auto we are able to get scrollHeight equal to content height that can be used to set as current textarea height.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <textarea style="resize: none;" id="my-element">Type multi-line text here</textarea>
  <script>

     function preapreAutogrowing(element) {

        function onAction() {
          	var style = element.style;
			style.height = 'auto';
			style.height = element.scrollHeight + 'px';
        }

        element.addEventListener('input', onAction);
        element.addEventListener('change', onAction);

        var destroyed = false;

        var result = {
            update: onAction,
            destroy: function()
            {
                if (destroyed)
                    return;

                destroyed = true;

                hElement.removeEventListener('input', onAction);
                hElement.removeEventListener('change', onAction);
            }
        };

        return result;
    }
    
    var element = document.querySelector('#my-element');
    var autogrowing = preapreAutogrowing(element);

    element.value = '1\n2\n3\n4\n5\n6';
    autogrowing.update();

  </script>
</body>
</html>

2. Number of lines detection example

Notes:

  • this approach does not work if word wrapping is enabled
  • in different browsers effect can be different (Firefox and Chrome interpret number of rows different way when horisontal scroll is visible)
// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    textarea {
      overflow-y: hidden;
      white-space: pre;
    	resize: none;
	  }
    
  </style>
  <script>

    function preapreAutogrowing(element) {
        var expression = /\n/g;

        function onAction() {
            var text = element.value;

            if(text) {
                var match = text.match(expression);

                if(match) {
                    element.rows = match.length + 2;

                    return;
                }
            }

            element.rows = 2;
        }

        element.addEventListener('input', onAction);
        element.addEventListener('change', onAction);

        var destroyed = false;

        var result = {
            update: onAction,
            destroy: function()
            {
                if (destroyed)
                    return;

                destroyed = true;

                hElement.removeEventListener('input', onAction);
                hElement.removeEventListener('change', onAction);
            }
        };

        return result;
    }

  </script>
</head>
<body>
  <textarea id="my-element">Type multi-line text here...</textarea>
  <script>

    var element = document.querySelector('#my-element');
    var autogrowing = preapreAutogrowing(element);

    element.value = '1\n2\n3\n4\n5\n6';
    autogrowing.update();

  </script>
</body>
</html>

Merged questions:

  1. JavaScript - how to dynamically change the height of textarea based on the text size?
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more