How to set max row in html Textarea to make overflow auto?

Question

Good day everyone, just can't figure out a way to set max row. I wanted to set max row to make the element overflow auto when max row is reached.

No such thing as 'max row'. You can play with 'max-height'. Textarea does not have overflow or auto. It is always scrollable. What you can do is keep an eye on the length of text in textarea and keep changing it's height to a point where you no longer change height and the scrollbar will become enabled. — Nawed Khan, Jun 10 '19 at 17:44
Sorry for this noob question, i know that their so such thing as max row in text area. I might have formulated my question wrong 'cause i was to sleepy. By the way thank you Nawed Khan, tried your suggestion using script by adding height to the textbox and wrapping it with a div which has max height. Thank you for the help. — Edwin Bermejo, Jun 15 '19 at 14:03

score 0 · Answer 1 · answered Jun 15 '19 at 14:10

var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent('on'+event, handler);
    };
}
else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}
function init () {
    var text = document.getElementById('text');
    function resize () {
        text.style.height = 'auto';
        text.style.height = text.scrollHeight+'px';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize () {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);

    text.focus();
    text.select();
    resize();
}

Found a solution using an auto-sizing text with this solution => Creating a textarea with auto-resize

And use this line of code only

function resize () {
  text.style.height = 'auto';
  text.style.height = text.scrollHeight+'px';
}

Then wrapping the text area with a div that has max-height.

Sorry for the noob question and Thank you for the suggestion.

How to set max row in html Textarea to make overflow auto?

1 Answers1