[JQuary] 在ASPX網頁上建立可限制輸入字數的輸入欄位

2010-09-08

8915
0
JavaScript
2010-09-16

一般來說，在製作一些填寫資料的網頁表單時，都會限制可輸入的字數、型態、格式等等...，以符合效能的要求、資料庫的設計及記錄資料的正確性等...

一般來說，在製作一些填寫資料的網頁表單時，都會限制可輸入的字數、型態、格式等等...，以符合效能的要求、資料庫的設計及記錄資料的正確性等，以上的要求都可透過正規表示式和程式的控制達成，只需在送出資料前驗證即可。

但其中較為特殊的是字數限制的部分，雖然一樣可在最後判斷是否已超出限制的字數，但這對於一般使用者而言，每次送出後才顯示警語而無法即時提示的話，似乎就不能算是個友善的介面。

如果開發工具是使用 Visual Studio，那內建的 TextBox 元件已經有 "MaxLength"屬性可直接設定字數的上限字數，超出限制時即無法再輸入，基本上已經達成一般所需要求，但這只限定在其 TextMode 為 SingleLine 的時候，如果該欄位需輸入大量文字而將TextMode 改為 MultiLine，那 "MaxLength"屬性的限制功能將會失效。

繞了這麼大一圈，其實要說的是在網頁介面上限制字數其實還是用 JavaScript 較為有效且具即時性，在此提供最近練習JQuary時所撰寫的例子：

首先在ASPX網頁上的 <head runat="server"></head> 區段裡加入下列 JavaScript Code：

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

    <script type="text/javascript">
        $(function() {

            $("#<%= txb_MultiLine.ClientID %>").live("keyup", KeyIn).live("keydown", KeyIn).live("change", KeyIn);

        });

        function KeyIn(evt) {
            var maxLength = 200;

            var nowContent = $(this).val();
            var nowLehgth = nowContent.length;

            if (nowLehgth > maxLength)
                $(this).val(nowContent.substring(0, maxLength));
            else
                $("#Count").html(maxLength - nowLehgth);
        }
    </script>

由於元件為 .Net 的控制項，故將該元件(txb_MultiLine)的 ClientID 指定為 JQuary 要抓取的 ID，並以 .live 的方式在元件以產生後才將 keyup 、keydown 及 change 等事件註冊給 txb_MultiLine，且事件處理的方法皆設定為 function KeyIn(evt)。

這邊要注意的是，keyup 及 keydown 事件是用來對應鍵盤的輸入動作做偵測和限制，但是對於滑鼠右鍵的貼上、以拖拉方式新增的內容則無法管控，於是再將 change 事件加入，以彌補上述兩項方式(右鍵貼上、拖拉)的控管；但可惜的是 change 事件並無法像 keyup 及 keydown 事件可直接於字數變動時限制住字數，而是在字數變動後在網頁上除了 txb_MultiLine 的任意地方點擊時才能產生反應，這點目前尚未想出較佳的解決方式。

在 KeyIn 方法內變數 maxLength 為最大字數的上限值，變數 nowContent 為取得目前在 txb_MultiLine 所輸入的內容，變數 nowLehgth 則為輸入內容的字數；依上述內容來判斷目前 txb_MultiLine 的字數是否已超過最大字數的上限值，如果尚未超過則更新剩餘可輸入字數於 ID 為 Count 的 span 區塊內，如果已超過則抓取前最大字數的字串並顯示於txb_MultiLine 內。

由於只要超過最大字數便只抓取該限制的字數顯示於輸入欄位內，所以可以有效的限制住上限字數。

接著在ASPX網頁的 <form id="form1" runat="server"></form> 區段裡加入下列標籤：

<div align="center">
        <br />
        <asp:TextBox ID="txb_MultiLine" runat="server" MaxLength="100" Width="219px" TextMode="MultiLine"
            Height="119px"></asp:TextBox><br />
        <span id="Count">
            <br />
        </span>
    </div>

txb_MultiLine 為提供輸入的輸入欄位 ID。

ID 為 Count 的 span 區塊則用來顯示剩餘的字數。

另有 HTML 版本的線上 DEMO 可試試效果，有興趣者請點我前往 DEMO

內容與上述例子大同小異，可檢視網頁原始碼查看相關設定，主要在於提供給 JQuary 的 ID 以及把 TextBox 換成了 textarea 這些細節設定上的差異。

Cross

推到 Plurk! 分享

回首頁