How do I make an expanding textbox?

Question

I want to make a textbook where it starts out as a given width/height. Then if users type more then the given amount of space, the textbox expands downward. How do I go about doing this? Do I use CSS? The basic textbox just displays a scroll bar when users pass the number of rows allow. How do I make it so the textbox expands the rows by say 5 more?

<form method="post" action="">
<textarea name="comments" cols="50" rows="5"></textarea><br>
<input type="submit" value="Submit" />
</form>

How do I use the example that Robert Harvey mentioned? I never used JavaScript before..

Possible duplicate of [Creating a textarea with auto-resize](https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize) — localhostdotdev, May 09 '19 at 16:00
duplicate of https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize — localhostdotdev, May 09 '19 at 16:00

Robert Harvey · Accepted Answer · 2012-08-31T16:26:31.180

5

jQuery AutoResize Plugin
http://james.padolsey.com/javascript/jquery-plugin-autoresize/

Steps to use:

You need jQuery. To add it to your page:

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

Then, download the plugin and put it in the same folder as your web page. To reference it, add this to your web page:

<script type="text/javascript"
    src="autoresize.jquery.js"></script>

Next, add a textbox to your page:

<textarea id="comment" style="width: 400px; padding: 10px; height: 50px; 
    display: block; font-family:Sans-serif; font-size:1.2em;">
    Type something in here, when you get close to the end the box will expand!
</textarea>

Finally, in a script block, add the code that hooks up the plugin to the textbox:

<script type="text/javascript">
    $('textarea#comment').autoResize({
        // On resize:
        onResize : function() {
            $(this).css({opacity:0.8});
        },
        // After resize:
        animateCallback : function() {
            $(this).css({opacity:1});
        },
        // Quite slow animation:
        animateDuration : 300,
        // More extra space:
        extraSpace : 40
    });
</script>

edited Aug 31 '12 at 16:26

answered May 27 '10 at 20:31

Robert Harvey

178,213
47
333
501

o that is awesome. just what i needed!! – jpjp May 27 '10 at 20:33
I'm sorry but I have never used jquery before. may you should me how to get this to work? I downloaded the codes and put them in . But the textbox is still the same – jpjp May 27 '10 at 20:44
Here's a good instructional video: http://www.youtube.com/watch?v=Hk5oXFtYLwE Or you can read the jQuery documentation: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery – mVChr May 27 '10 at 20:49
The textbox doesn't expand. When i press enter, the box doesn't expand. it stays the same size but the words goes above. is the script box just putting in ? – jpjp May 27 '10 at 21:05
Yes, if I understand you correctly. See my edit at the bottom. – Robert Harvey May 27 '10 at 21:24
yes yes I must have accidentally mispelled a word or something. Thank you VERY much for helping a beginner out :DD – jpjp May 27 '10 at 21:32
The link in this answer is broken now - is it available elsewhere? – Anderson Green Dec 30 '12 at 06:54

kennebec · Answer 2 · 2010-05-27T21:58:20.310

4

You can add a library if you care to, or just keep track of the textarea's scrollTop property.

If scrollTop is not zero, add your rows.

<!doctype html> 
<html lang= "en"> 
<head> 
<meta charset= "utf-8"> 
<title>Expand textarea </title> 
<style>
textarea{overflow-y:scroll}
</style>
<script>
onload=function(){
    var who=document.getElementsByName('comments')[0];
    who.onkeyup=function(){
        if(who.scrollTop)who.rows=parseInt(who.rows)+5;
    }
}
</script>
</head> 
<body>
<textarea name="comments" cols="50" rows="5"></textarea> 
</body> 
</html>

edited May 27 '10 at 21:58

answered May 27 '10 at 21:50

kennebec

102,654
32
106
127

1

Nice, simple and library-less, but still needs a lot of work; [fiddle](http://jsfiddle.net/h7jmmwcv/). Pasting with mouse (keyup not invoked), entering text from the top (scrolltop not changed), deleting text (height not reduced), annoying useless scrollbar displayed are a few of the things stopping me from wanting to use it – Hashbrown Dec 30 '14 at 00:12

score 2 · Answer 3 · answered Dec 30 '14 at 01:20

Here is my solution using only vanilla javascript.
Tested to work in Chrome, Firefox & IE8 and up.

On load, or whack it in a function:

var element = document.getElementById('comments');
var retractsAutomatically = false;

var sizeOfOne = element.clientHeight;
element.rows = 2;
var sizeOfExtra = element.clientHeight - sizeOfOne;
element.rows = 1;

var resize = function() {
    var length = element.scrollHeight;

    if (retractsAutomatically) {
        if (element.clientHeight == length)
            return;
    }
    else {
        element.rows = 1;
        length = element.scrollHeight;
    }

    element.rows = 1 + (length - sizeOfOne) / sizeOfExtra;
};

//modern
if (element.addEventListener)
    element.addEventListener('input', resize, false);
//IE8
else {
    element.attachEvent('onpropertychange', resize)
    retractsAutomaticaly = true;
}

CSS & HTML:

textarea#comments { overflow:hidden; }

<textarea id="comments" cols="50" rows="1"></textarea>

How do I make an expanding textbox?

3 Answers3

Linked