segunda-feira, 23 de setembro de 2013

Contar o limite de Caracteres do TextBox

Vou mostrar como contar o limite de caracteres restante de um textbox com o ASP.NET e JavaScript.

Crie um arquivo JavaScript (JS), veja o código abaixo:


function validateLimit(obj, divID, maxchar) {

    objDiv = get_object(divID);

    if (this.id) obj = this;

    var remaningChar = maxchar - obj.value.length;

    if (objDiv) {
        objDiv.innerHTML = remaningChar + " characters left";
    }
    if (remaningChar <= 0) {
        obj.value = obj.value.substring(maxchar, 0);
        if (objDiv) {
            objDiv.innerHTML = "0 characters left";
        }
        return false;
    }
    else
    { return true; }
}

function get_object(id) {
    var object = null;
    if (document.layers) {
        object = document.layers[id];
    } else if (document.all) {
        object = document.all[id];
    } else if (document.getElementById) {
        object = document.getElementById(id);
    }
    return object;
}
Importe este arquivo no seu código HTML  dentro da tag <head>:
     <script type="text/javascript" src="js/JScript.js" ></script>
Nosso HTML Ficará desta maneira:

<div><br />
    <div id="lblMsg1">240 caracteres restantes</div>
<asp:TextBox ID="TextBox1" runat="server" Height="50px" MaxLength="240" TextMode="MultiLine"
                    Width="600px" ToolTip="Summary:(240 characters)"
                    onkeyup="return validateLimit(this, "lblMsg1", 240)"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
            ControlToValidate="TextBox1" Display="Dynamic" SetFocusOnError="True">*</asp:RequiredFieldValidator>
<br /><br /><br />
<div id="lblMsg2">300 caracteres restantes</div>
<asp:TextBox ID="TextBox2" runat="server" Height="50px" MaxLength="300" TextMode="MultiLine"
                    Width="600px" ToolTip="Summary:(300 characters)"
                    onkeyup="return validateLimit(this, "lblMsg2", 300)"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
            ControlToValidate="TextBox2" Display="Dynamic" SetFocusOnError="True">*</asp:RequiredFieldValidator>
</div>

0 comentários:

Postar um comentário