How do I make an expanding textbox?

前端未结

关注

 3  1796

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 do

相关标签:

3条回答

无人及你

2021-02-04 19:27

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>

0 讨论(0)

灰色年华

2021-02-04 19:27

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>

0 讨论(0)

刺人心

2021-02-04 19:32

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>

0 讨论(0)