Automatic textarea

Question

Speak, folks.

I would like to know how to allow automatic scrolling of the textarea, for example, so that the user will type something inside the textarea, the same changes height, according to what the user type.

I removed the scroll arrow/bar that is created for the user to type, which is created as soon as the text size goes from the height given to the textarea. I would like the height of the textarea automatically changed according to the user’s typed text.

Thank you!

Answer 1

Only an HTML5 note goes beyond tags, so the resolution here is not quite this one. In the case only with HTML and CSS there is no way to do.

I don’t quite understand what you mean by arrow and descend automatically, to where I know when pressing Enter or the text break line the scroll rolls normally, maybe what you want is the textarea increase?

It is possible using Javascript and capturing the scroll height by manipulating the css then for example:

   function addEvent(type, el, callback)
   {
    if (window.addEventListener) {
        el.addEventListener(type, callback, false);
    } else if (window.attachEvent) {
        el.attachEvent("on" + type, callback);
    } else {
        el["on" + type] = callback;
    }
   }

   function resizeTextfield(el)
   {
    var timer;

    function trigger() {
        if (!el) { return; }

        el.style.height = "auto";

        var height = el.scrollHeight;

        el.style.height = height + "px";
    }

    function exec() {
        if (timer) {
            clearTimeout(timer);
        }

        timer = setTimeout(trigger, 10);
    }

    addEvent("keyup", el, exec);
    addEvent("input", el, exec);
   }

window.onload = function () {
    var els = document.getElementsByClassName("increase");

    for (var i = els.length - 1; i >= 0; i--) {
        resizeTextfield(els[i]);
    }
};

.increase
{
    width: 480px;
    min-height: 240px; /*altura minima*/
    overflow: hidden;
    resize: none; /* pode trocar por resize: vertical; se quiser permitir redimensionar manualmente na vertical*/
}

<textarea class="increase"></textarea>