Menu
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..
407
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>
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
