使用ASP.NET Atlas開發隨輸入內容自動調整行數的textarea

來源:互聯網
上載者:User
作者:Dflying Chen (http://dflying.cnblogs.com )

好多朋友使用過Outlook或者Windows Live Mail:在撰寫新郵件時,您會發現初始的收件者文字框只有一行。但如果您輸入了好多地址,超過了一行的長度,它會自動地變成兩行,如果不夠,還會變成三行,四行等。這種文字框既節約了初始空間,又讓使用者輸入大量資料時不感到局促。為了讓您對其有更直觀的瞭解或是有些朋友沒有用到過上述產品,請看下面的:

初始只有兩行:
當您繼續輸入時,行數會自動增加:

當增加到設定的最大數目(這裡是5)時,
捲軸依然會出現:

這時如果您刪除了其中的一些文字,
行數也會隨之自動減少:

怎麼樣,很酷吧?如果您正在使用ASP.NET Atlas,那麼實現這樣的功能是非常簡單的,您只需要建立一個輸入控制項:AutoResizeTextArea

  1. 充分利用Atlas提供的強大的JavaScript物件導向功能,繼承於Sys.UI.TextBox類,重用父類的基礎功能。
  2. 捕獲DOM的onkeyup事件,並計算是否超過了這個textarea可容納的文字數量,以動態調整該textarea的行數。這是本控制項實現中比較有“技術含量”的部分,您可以參考源檔案以得到具體實現。

AutoResizeTextArea有如下兩個屬性:

  1. minRowCount:該textarea最少的行數,預設值和textarea聲明中的rows屬性相同,如果textarea沒有聲明rows屬性,那麼預設值為3。
  2. maxRowCount:該textarea最多的行數,預設值為7。

這裡您可以很容易的擴充或重寫我的邏輯,比如,將maxRowCount屬性的預設值改為無窮大等。

使用AutoResizeTextArea控制項要注意以下兩點:

  1. ScriptManager中要添加AutoResizeTextArea.js檔案的引用。
  2. 作為AutoResizeTextArea控制項的源DOM元素必須為textarea,My Code中沒有對相關元素的檢查,如果您需要,可以很容易的添加上去。

該控制項的原始碼以及開頭部分樣本程式可以在此下載:http://files.cnblogs.com/dflying/AutoResizeTextArea.zip

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.