Automatic textarea

Question

Automatic textarea

Navigation

#1 by (5 votes)

0

Speak, people.

I'd like to know how to allow automatic scrolling of textarea , for example, as soon as the user types something inside textarea , it changes height, according to what the user types.

I've removed the arrow / scroll bar that is created for the user to type, which is created from as soon as the text size passes from the height given to textarea . I would like the height of textarea to be automatically changed according to the text entered by the user.

Thank you!

html html5 css

asked by anonymous 01.09.2016 / 06:27

1 answer

iterative sum bigdecimal How do I create a CRUD structure with PHP [closed]

score 5 · Accepted Answer

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

I do not quite understand what you mean by arrow and come down automatically, until I know when I press Enter or the text breaks line scroll scrolls normally, maybe what you want is that textarea increase?

It is possible using Javascript and capturing the height of the scroll 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>