textbox 输入,你还可以输入多少个字?

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="TextBoxMaxlength.aspx.cs" Inherits="TextBoxMaxlength" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <style type="text/css">
        .warning
        {
            color: Red;
        }
        .normal
        {
            color: Blue;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var limitNum = 100;
            var pattern = '还可以输入' + limitNum + '';
            $("#statementRowChk").html(pattern);
            $('#statementRowChk').addClass('normal');
            $("#<%=txtCont.ClientID %>").attr('maxlength', limitNum);

            $("#<%=txtCont.ClientID %>").keyup(function () {
                var contValue = $("#<%=txtCont.ClientID %>").val().trim();
                var contLength = contValue.trim().length;
                if (contLength >= limitNum) {
                    pattern = '字数超过最大限制';
                    $('#statementRowChk').removeClass('normal').addClass('warning');
                }
                else {
                    var result = limitNum - contLength; ;
                    pattern = '还可以输入' + result + '';
                    $('#statementRowChk').removeClass('warning').addClass('normal');
                }
                $('#statementRowChk').html(pattern);
            });
        });
    </script>
    <asp:TextBox ID="txtCont" runat="server" TextMode="MultiLine" Style="width: 400px;
        height: 300px;"></asp:TextBox>
    <span id="statementRowChk" style="font-size: 12px;"></span>
</asp:Content>

 修改版,

$('#id')同一个id尽量不在重复多次。赋值给一个变量,是好方法。

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="TextBoxMaxlength.aspx.cs" Inherits="TextBoxMaxlength" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <style type="text/css">
        .warning
        {
            color: Red;
        }
        .normal
        {
            color: Blue;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var limitNum = 100;
            var pattern = '还可以输入' + limitNum + '';
            //try not repeat use $('#id') in many places
            var statementRowchk = $("#statementRowChk"); 
            statementRowchk.html(pattern);
            statementRowchk.addClass('normal');
            $("#<%=txtCont.ClientID %>").attr('maxlength', limitNum);
            $("#<%=txtCont.ClientID %>").keyup(function () {
                var contValue = $("#<%=txtCont.ClientID %>").val().trim();
                var contLength = contValue.trim().length;
                if (contLength >= limitNum) {
                    pattern = '字数超过最大限制';
                    statementRowchk.removeClass('normal').addClass('warning');
                }
                else {
                    var result = limitNum - contLength; ;
                    pattern = '还可以输入' + result + '';
                    statementRowchk.removeClass('warning').addClass('normal');
                }
                statementRowchk.html(pattern);
            });
        });
    </script>
    <asp:TextBox ID="txtCont" runat="server" TextMode="MultiLine" Style="width: 400px;
        height: 300px;"></asp:TextBox>
    <span id="statementRowChk" style="font-size: 12px;"></span>
</asp:Content>

 

posted @ 2014-03-11 18:31  chengdu.jack.li  阅读(298)  评论(0)    收藏  举报