當我們使用 Textarea 物件時，一開始就要先指定好它的 rows 了，這樣才能加長整個 Textarea 物件。不過 jGrow 是一個很有趣的套件，它可以先設定 Textarea 最大的高度，這樣一開始就可以不用把 Textarea 拉那麼高，等使用者輸入到那邊時才自動去拉高。
0.3 版的做法則是直接控制 Textarea 的 height 屬性，所以一開始如果 Textarea 沒有設定 height 屬性是會有問題的。筆者修改了原本沒有設定 height 屬性的問題，但在 IE 6 中測試自動伸長還是有問題的，而 FireFox 跟 Chrome 都正常。
0.2 版的做法是直接控制 Textarea，設定的 rows 為多少，那 Textarea 就會自動配合輸入而拉高到設定的 rows；超過就會出現捲軸(這邊的 rows 是 jGrow 的設定值，而不是 Textarea 的 rows 值)。
套件名稱：jGrow
套件版本：0.5
作者網站：http://lab.berkerpeksag.com/jGrow
套件網址：http://plugins.jquery.com/project/jGrow
發佈日期：2010-06-05
檔案大小：3.38 KB
檔案下載：jquery.jgrow-0.5.js
參數說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | max_height(選填, 0.3) 描述： textarea 的最大高度，超過時會有捲軸 預設值： "700px" resize(選填, 0.4) 描述： 讓在 Firefox 或 Chrome 中是否允許直接透過滑鼠來縮放大小 預設值： "none" overflow(選填, 0.4) 描述： 主要是針對 IE 來控制是否顯示捲軸用 預設值： "hidden" cache_height(選填, 0.4) 描述： 用來暫存 textarea 高度用 預設值：0 rows(選填, 0.2 版適用) 描述： textarea 的最大高度，超過時會有捲軸 預設值： 0 |
方法說明：
檢視原始碼 JavaScript
1 2 | // 使用 jGrow 效果 $(selector).jGrow([settings]); |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.jgrow-0.5.js"></script> <script type="text/javascript"> $(function(){ $("#adres").jGrow({ max_height: "400px" }); }); </script> <body> <textarea name="frmAdres" id="adres" cols="40" rows="4"></textarea> </body> |