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>
共同学习,共同进步!

浙公网安备 33010602011771号