JQUERY文本框計算輸入字數

今天在開發時想對一個textarea進行輸入字數的限制，同時可以顯示給客戶剩餘多少字數，就像現在很多的論壇博客。在網上找了一下，看到了一些很好的JQUERY插件，美中不足的是在使用說明上不夠詳細，轉載的文章也都是原文抄襲，真不知道這些兄弟轉載了幹嗎。

比較之後我選擇了一個maxlength的JQUERY插件，原文見http://www.iinterest.net/2009/01/31/jquery-plugin-maxlength/ ，感謝原作者。因爲此插件限制較多，使用不太方便，所以我做了一些修改。修改點如下：

• 原插件限制了顯示剩餘字符的控件類型爲input，我改爲無限制
• 原插件限制了一個form內所有控件只能有相同的字符長度控制，我新增了一個參數maxlength，用於自己指定每個控件的字符長度
• 將原控件根據class名字來查找控件改爲根據id來查找

因原文對具體使用說明不細，導致我這樣對JQUERY不是特別熟悉的人花了不少時間調試，爲了照顧像我一樣水平的兄弟，下面給出詳細的應用代碼。

ASPX文件：

引入JS

<script type="text/javascript" src="../script/maxlength.js"></script>

因爲是限制textarea控件，所以必須使用一個hidden input來控制長度，原因是textarea的maxlength屬性取值爲用戶實際輸入的字符長度。如果是限制input的輸入長度，就不需要了。

                    <asp:TextBox TextMode="MultiLine" Wrap="true" runat="server" ID="PositionInfo" Rows="20" Width="825px" MaxLength="3000"></asp:TextBox>                       
                    <br />最多3000字，還可輸入<span id="DescSize">3000</span>字
                    <input type="hidden" name="maxlength" Value="3000" id="maxlength"/>
 

JQUERY引用：

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

                $('#<%=PositionInfo.ClientID%>').bind('propertychange', function() {
                $(this).maxlength({
                        'feedback': 'DescSize','useInput': true
                    });
                });

});                          
    </script> 
注意因爲引用了aspx的控件，所以這部分script需要放在body中

附件是修改過的js，請大家自己改一下後綴名

 

 

最後給網站做個廣告：免費交友網站-交友樂 ，希望大家隨手點擊一下，謝謝。