Breaking News: Grepper is joining You.com. Read the official announcement!

javascript textarea autosize

Add Answer

Good Gnat answered on January 27, 2021 Popularity 9/10 Helpfulness 4/10

answer javascript textarea autosize

related jquery textarea autosize

related auto adjust textarea

related autosize a textarea using Prototype

javascript textarea autosize

Comment

function addAutoResize() {
  document.querySelectorAll('[data-autoresize]').forEach(function (element) {
    element.style.boxSizing = 'border-box';
    var offset = element.offsetHeight - element.clientHeight;
    element.addEventListener('input', function (event) {
      event.target.style.height = 'auto';
      event.target.style.height = event.target.scrollHeight + offset + 'px';
    });
    element.removeAttribute('data-autoresize');
  });
}

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: stephanwagner.me

Tags: autosize javascript textarea

Link to this answer
Share Copy Link

Contributed on Apr 13 2022

Good Gnat

0 Answers Avg Quality 2/10

Closely Related Answers

jquery textarea autosize

Comment

$("textarea").keyup(function(e) {
    while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
        $(this).height($(this).height()+1);
    };
});

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: autosize autosiz

Link to this answer
Share Copy Link

Contributed on Jan 27 2021

Ugliest Unicorn

0 Answers Avg Quality 2/10

auto adjust textarea

Comment

const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
  tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput() {
  this.style.height = 0;
  this.style.height = (this.scrollHeight) + "px";
}

Popularity 9/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: auto textarea textar

Link to this answer
Share Copy Link

Contributed on Apr 21 2023

chifarol

0 Answers Avg Quality 2/10

autosize a textarea using Prototype

Comment

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script language="javascript">
            google.load('prototype', '1.6.0.2');
        </script>
    </head>

    <body>
        <textarea id="text-area" rows="1" cols="50"></textarea>

        <script type="text/javascript" language="javascript">
            resizeIt = function() {
              var str = $('text-area').value;
              var cols = $('text-area').cols;

              var linecount = 0;
              $A(str.split("\n")).each( function(l) {
                  linecount += Math.ceil( l.length / cols ); // Take into account long lines
              })
              $('text-area').rows = linecount + 1;
            };

            // You could attach to keyUp, etc. if keydown doesn't work
            Event.observe('text-area', 'keydown', resizeIt );

            resizeIt(); //Initial on load
        </script>
    </body>
</html>

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: autosize autosiz

Link to this answer
Share Copy Link

Contributed on Jul 24 2021

Code with bulbul

0 Answers Avg Quality 2/10

javascript textarea autosize

Contents

More Related Answers

javascript textarea autosize

Closely Related Answers

jquery textarea autosize

auto adjust textarea

autosize a textarea using Prototype

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.