2010-05-27 58 views
6

我想製作一本教科書作爲給定的寬度/高度。然後,如果用戶鍵入的空間大於給定的空間量,文本框將向下擴展。我如何去做這件事?我使用CSS嗎? 當用戶通過允許的行數時,基本文本框只顯示一個滾動條。我如何做到這一點,所以文本框擴大了行5說?如何製作擴展文本框?

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

如何使用Robert Harvey提到的例子?我從來沒有使用的JavaScript之前..

回答

5

的jQuery插件自動調整
http://james.padolsey.com/javascript/jquery-plugin-autoresize/

使用步驟如下:

你需要jQuery的。將其添加到您的網頁:

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

然後,下載插件並把它放在同一個文件夾您的網頁。要引用它,將它添加到您的網頁:

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

接着,一個文本框添加到您的網頁:

<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> 

最後,在一個腳本塊,添加插件掛接到代碼文本框:

<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

ö即真棒。正是我需要的! – jpjp 2010-05-27 20:33:30

+0

對不起,但我從來沒有使用過jQuery。請問我應該如何讓這個工作?我下載了代碼並將它們放在。但文本框仍然是一樣的 – jpjp 2010-05-27 20:44:01

+0

這是一個很好的教學視頻:http://www.youtube.com/watch?v=Hk5oXFtYLwE 或者你可以閱讀jQuery文檔:http://docs.jquery.com/Tutorials: Getting_Started_with_jQuery – mVChr 2010-05-27 20:49:48

4

如果您關心或添加textarea的scrollTop屬性,您可以添加一個庫。

如果scrollTop不爲零,請添加行。

<!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> 
+1

好,簡單,無圖書館,但仍需要大量工作; [小提琴](http://jsfiddle.net/h7jmmwcv/)。用鼠標粘貼(鍵入未被調用),從頂部輸入文本(滾動頂部沒有改變),刪除文本(高度不減少),惱人的無用滾動條顯示是阻止我想要使用它的一些事情 – Hashbrown 2014-12-30 00:12:13

1

這裏是my solution只使用香草的JavaScript。
經測試可在Chrome,Firefox & IE8及更高版本上運行。

上的負載,或捶它在一個函數:

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>