今天在开发时想对一个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，请大家自己改一下后缀名

 

 

最后给网站做个广告：免费交友网站-交友乐 ，希望大家随手点击一下，谢谢。