How to Set maxlength (character counter) for textbox in asp.net using jquery.

We learn in this article, how to set max length of multiple textbox in asp.net c# with Jquery even at cut and paste. We have a Textbox which has TextMode as "MultiLine". And we want to restrict the number of characters to 1000 (key in and data paste), and also the div character counter should reduce based on the characters.



Source Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="MaxLength.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //Normal Configuration
            $("[id*=TextBox1]").MaxLength({ MaxLength: 100 });

            //Enable (with) Character Counter
            $("[id*=TextBox2]").MaxLength(
            {
                MaxLength: 1000,
                CharacterCountControl: $('#counter')
            });

            //Disable (without) Character Counter
            $("[id*=TextBox3]").MaxLength(
            {
                MaxLength: 100,
                DisplayCharacterCount: false
            });
        });
    </script>
</head>
<body>


    <form id="form1" runat="server">
        <fieldset style="width: 350px">
            <legend>Noraml MaxLength of textbox and counter </legend>


            <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Width="300" Height="100"></asp:TextBox>
        </fieldset>
        <br />
        <fieldset style="width: 350px">
            <legend>MaxLength with Enable Character Counter </legend>


            <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" Width="300" Height="100"></asp:TextBox>

            <div id="counter" style="float:right;"/>
        </fieldset>
        <br />
        <br />
        <fieldset style="width: 350px">
            <legend>MaxLength with Disable Character Counter  </legend>
            <asp:TextBox ID="TextBox3" runat="server" TextMode="MultiLine" Width="300" Height="100"></asp:TextBox>
        </fieldset>
         <br />
    </form>
</body>
</html>





Note: Please download the file  MaxLength.min javascript
















How to Set maxlength (character counter) for textbox in asp.net using jquery. How to Set maxlength (character counter)  for textbox in asp.net using jquery. Reviewed by NEERAJ SRIVASTAVA on 8:39:00 PM Rating: 5

No comments:

Powered by Blogger.