動態增加文本框高度？

Question

可能重複：
Autosizing Textarea

大家好，我試圖解決一個問題，它變得毫無辦法。我試圖做的是動態改變輸入框的高度，當用戶文本溢出它的寬度時（類似Facebook的狀態更新文本框）。

您輸入一個簡短更新，如果文本比文本框長，它將創建一個新行。我嘗試使用textarea，但無論出於何種原因，默認情況下都不能強制它爲1行。

任何人都知道一個簡單的方法來做到這一點？ :(

Answer 1

爲了讓textarea伸展，給這個一去（jQuery的）：http://www.unwrongest.com/projects/elastic/

至於具體哪一行的高度，你可以嘗試rows="1"在<textarea>標籤，以及消除CSS但是，某些瀏覽器可能會將textarea的最小高度設置爲多於一行

另一種解決方案是在屏幕上使用div，當用戶單擊它時，會使瀏覽器專注於隱藏文本框。用戶鍵入到隱藏文本框中，並通過JavaScript給文本框的內容div。棘手的bi t然後是閃爍的光標，但你可以使用管道中的|字符並使其閃爍，儘管這開始在你啓動它時開始變長。我用的textarea再次嘗試親自:-)

希望這有助於

詹姆斯

Answer 2

可以使用CSS的高度和寬度參數手動控制textarea的大小。通過將按鍵事件綁定到textarea，您可以獲得框中的文本數量並相應地調整高度。例如，這裏的一些jQuery的，將增加20個像素框的高度，你把每50個字符：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> 
</script> 

<textarea id="textbox" style="height:20px;width:400px;"></textarea> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#textbox").val(''); 
    $("#textbox").keypress(function() { 
     var textLength = $("#textbox").val().length; 
     if (textLength % 50 == 0) { 
      var height = textLength/50; 
      $("#textbox").css('height', 20+(height*20)); 
     } 
    }); 
}); 
</script> 

你可以調整值來得到想要的效果。