作者:Dflying Chen (http://dflying.cnblogs.com )
好多朋友使用過Outlook或者Windows Live Mail:在撰寫新郵件時,您會發現初始的收件者文字框只有一行。但如果您輸入了好多地址,超過了一行的長度,它會自動地變成兩行,如果不夠,還會變成三行,四行等。這種文字框既節約了初始空間,又讓使用者輸入大量資料時不感到局促。為了讓您對其有更直觀的瞭解或是有些朋友沒有用到過上述產品,請看下面的:
初始只有兩行:
|
當您繼續輸入時,行數會自動增加:
|
當增加到設定的最大數目(這裡是5)時, 捲軸依然會出現:
|
這時如果您刪除了其中的一些文字, 行數也會隨之自動減少:
|
怎麼樣,很酷吧?如果您正在使用ASP.NET Atlas,那麼實現這樣的功能是非常簡單的,您只需要建立一個輸入控制項:AutoResizeTextArea
- 充分利用Atlas提供的強大的JavaScript物件導向功能,繼承於Sys.UI.TextBox類,重用父類的基礎功能。
- 捕獲DOM的onkeyup事件,並計算是否超過了這個textarea可容納的文字數量,以動態調整該textarea的行數。這是本控制項實現中比較有“技術含量”的部分,您可以參考源檔案以得到具體實現。
AutoResizeTextArea有如下兩個屬性:
- minRowCount:該textarea最少的行數,預設值和textarea聲明中的rows屬性相同,如果textarea沒有聲明rows屬性,那麼預設值為3。
- maxRowCount:該textarea最多的行數,預設值為7。
這裡您可以很容易的擴充或重寫我的邏輯,比如,將maxRowCount屬性的預設值改為無窮大等。
使用AutoResizeTextArea控制項要注意以下兩點:
- ScriptManager中要添加AutoResizeTextArea.js檔案的引用。
- 作為AutoResizeTextArea控制項的源DOM元素必須為textarea,My Code中沒有對相關元素的檢查,如果您需要,可以很容易的添加上去。
該控制項的原始碼以及開頭部分樣本程式可以在此下載:http://files.cnblogs.com/dflying/AutoResizeTextArea.zip