How can I increase textarea as it fills with javascript?

    4 answers 4

    First option:
    PS Using the contenteditable attribute

     div { border: 1px solid; } 
     <div contenteditable></div>

    The second option:

     var textarea = document.getElementsByTagName('textarea')[0]; textarea.addEventListener('keydown', resize); function resize() { var el = this; setTimeout(function() { el.style.cssText = 'height:auto; padding:0'; el.style.cssText = 'height:' + el.scrollHeight + 'px'; }, 1); } 
     textarea { width: 100%; resize: none; } 
     <textarea rows="1"></textarea>

    • Thank you, is there no other way? - Denver
    • @Denver what this way does not suit? - Dmitry
    • If you make textarea in one line, the code will not work correctly ... - Denver
    • @Denver, added the second option - Arthur
    • For another option, thanks, Vertically everything is true, but for auto textarea it is on two lines, you can do on line 1 - Denver

    An example of this is for the collection.

     var textarea = document.getElementsByTagName('textarea')[0]; /* Чтобы получить необходимы результат и исключить костыльный подход с setTimeout в теле инструкции обработчика resize, его лучше повесить на событие input вместо keydown */ textarea.addEventListener('input', resize); function resize(_e) { var event = _e || event || window.event; var getElement = event.target || event.srcElement; // var el = this; getElement.style.height = Math.max(getElement.scrollHeight, getElement.offsetHeight)+"px" } 
     textarea { width: 100%; resize: none; max-height: 100px; -off-padding:0 } div { position: relative; overflow: auto; border: 1px solid; max-height: 100px; } 
     <div contenteditable></div> <textarea rows="1"></textarea>

      One of the options:

       var Q; Q = {}; Q.elem = document.querySelector('.input-0'); Q.heightPlus = 12; var autoExpand = function() { Q.elem.style.height = 'inherit'; var height = Q.elem.scrollHeight + parseInt(Q.heightPlus); Q.elem.style.height = height + 'px'; }; document.oninput = function() { autoExpand(); } window.addEventListener('DOMContentLoaded', function() { autoExpand(); }); 
       textarea { min-height: 5em; max-height: 50vh; width: 100%; } 
       <textarea class="input-0"></textarea>

        Another option:
        Smooth change in height textarea as occupancy ...

         var Q; Q = {}; Q.inTime = 50; Q.inPlus = 15; Q.elem = document.querySelector('.input-0'); Q.elemTmp = document.querySelector('.input-tmp'); Q.scrollHeightInfo; Q.scrollHeightTmp = 0; Q.timeInterval; window.addEventListener('DOMContentLoaded', function() { autoExpand(); }); document.oninput = function() { autoExpand(); }; var autoExpand = function() { Q.elemTmp.value = Q.elem.value; Q.elemTmp.style.height = 'inherit'; Q.scrollHeightInfo = Q.elemTmp.scrollHeight + parseInt(Q.inPlus); if (Q.scrollHeightTmp === 0) { Q.scrollHeightTmp = Q.inPlus * 2; Q.elem.focus(); } else timeIntervalStart(); }; function timeIntervalStart() { if (Q.scrollHeightInfo === Q.scrollHeightTmp) { clearTimeout(Q.timeInterval); } Q.timeInterval = setTimeout(function() { if (Q.scrollHeightTmp < Q.scrollHeightInfo) { Q.scrollHeightTmp++; } if (Q.scrollHeightTmp > Q.scrollHeightInfo) { Q.scrollHeightTmp--; } Q.elem.style.height = Q.scrollHeightTmp + 'px'; timeIntervalStart(); }, Q.inTime); } 
         textarea { min-height: 5em; max-height: 50vh; width: 100%; } 
         <textarea class="input-0"></textarea> <textarea class="input-tmp" style="position: absolute;left: -5000px;"></textarea>