Textarea height increase based on content height

Question

I need increase the text area height based on content. if user type the content it automatically increase. and if delete the content it need reduce the height.

you can search on google ...you can find any jquery plugin . check this link http://stackoverflow.com/questions/2948230/auto-expand-a-textarea-using-jquery — Nishit Maheta, Mar 18 '15 at 05:42

score 2 · Accepted Answer · answered Mar 18 '15 at 05:45

Yes i got the answer, its work fine.

<textarea onkeyup="textAreaAdjust(this)" placeholder="Add a new answer" rows="1"></textarea>


 <script type="text/javascript"> 
                     function textAreaAdjust(o) {  
                     o.style.height = "1px";     o.style.height = (25+o.scrollHeight)+"px"; }
  </script>

score 1 · Answer 2 · edited May 23 '17 at 10:29

Try This:

<script type="text/javascript">
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();
}
</script>
<body onload="init();">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>
</html>

Here is Demo

Reference Creating a textarea with auto-resize

Nishit Maheta · Answer 3 · 2015-03-18T05:55:45.847

1

you can use jquery autogrow pluing

Code :

 $('textarea').autogrow({onInitialize: true});

Note : you need to include autogrow plugin file in to page

edited Mar 18 '15 at 05:55

answered Mar 18 '15 at 05:44

Nishit Maheta

6,021
3
17
32

Textarea height increase based on content height

3 Answers3