Languages
[Edit]
EN

JavaScript - how to make textarea autogrow?

3 points
Created by:
Kate_C
2895

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?
Hey 👋
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.