如何製作擴展文本框？

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

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

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

來源

2010-05-27 jpjp

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

來源

2010-05-27 20:31:57

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

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

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

如果您關心或添加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>

來源

2010-05-27 21:50:59 kennebec

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

這裏是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>

來源

2014-12-30 01:20:30 Hashbrown

如何製作擴展文本框？

回答

相關問題