當我們使用 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> |