可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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..
回答1:
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>
回答2:
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>
回答3:
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>
