Textarea that expands as you type and pushes down content below it

Question

I am looking for a way to make a <textarea> expand as the user types, but when it expands i want it to push down all content below it. I managed to make it expandable as the user types (with javascript) but i can't make it push down content that it's below the textarea

i am using a javascript code i took from another post here on stackoverflow:

function setNewSize (textarea) {
    if (textarea.value.length > 5){
        textarea.cols = 90;
        textarea.rows = 15;
    } else {
        textarea.cols = 90;
        textarea.rows = 5;
    }
}

and then calling it in <textarea onkeyup="setNewSize(this)"></textarea>

the script is fairly simple, i will edit it so that it expands one row at a time but first i have to deal with the problem that it exapands over other divs. — user2997092, Feb 04 '15 at 15:36
There are about a million and one solutions to this out there, including jQuery plug-ins which you can find with a quick Google search. Then on SO there is http://stackoverflow.com/questions/2948230/auto-expand-a-textarea-using-jquery, http://stackoverflow.com/questions/7745741/auto-expanding-textarea, http://stackoverflow.com/questions/19170083/automatically-resize-text-area-based-on-content, http://stackoverflow.com/questions/5523145/textarea-resize, among others. Did you bother to search for an answer before posting? — , Feb 04 '15 at 17:52
Maybe you dindn't understand what i was asking.The problem is that when the textarea expands it grows over the content that is below it. And to answer your question yes, i looked for an answer ( that's how i got the code that i am using right now ). — user2997092, Feb 05 '15 at 12:04

crisu · Accepted Answer · 2015-02-05T10:58:00.947

1

You could try this method to resize your textarea. If this does not work you should probably set some properties to the container of the textarea.

<script language="javascript">
    function increaseHeight(e){
       e.style.height = 'auto';
       var newHeight = (e.scrollHeight > 32 ? e.scrollHeight : 32);
       e.style.height = newHeight.toString() + 'px';
    }  
</script>    

<textarea onkeyup="increaseHeight(this);"></textarea>

edited Feb 05 '15 at 10:58

answered Feb 04 '15 at 15:52

crisu

150
4

the problem is no making the text area resize as typing, the main problem is pushing further down the content that is below the textarea so that it does not expand over other divs. – user2997092 Feb 04 '15 at 16:05
2

Why would you imagine that the content below would not move down as the textarea increases in height? Of course it will. – Feb 04 '15 at 17:45
The input event is better for this if you don't need to support old browsers: http://jsfiddle.net/z97xuLj0/ – Joseph Marikle Feb 04 '15 at 17:56

Textarea that expands as you type and pushes down content below it

1 Answers1