Description:

In this article, I will explain how to set MaxLength with MultiLine textbox using Jquery.  

If we want to limit the number of characters that can be entered in the textbox control, we can use MaxLength property.

MaxLength property is applicable only with the textbox mode ‘singleline’ and ‘password’.

If we want to restrict the number of characters in the MultiLine textbox, MaxLength Property will not work. For this scenario, use jquery Maxlength Plugin.

To restrict user from entering characters beyond a certain limit, use keyup() method with multiline textbox.

MaxLength Plugin used to limits the number of characters with multiline textbox and also displays the character count as text is typed.


2. Extract it and include the files jquery.maxlength.js , style.css and latest Jquery version.

3. Once the document is ready, initialize the Maxlength widget to the textbox.
   <script type="text/javascript">
        $(document).ready(function () {
            $('#TextBox1').maxlength();
        });
   </script>

Example program:

<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.10.2/jquery.min.js">
    </script>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="jquery.maxlength.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#TextBox1').maxlength({
                maxCharacters: 10,
                status: true,
                statusText: "character left",
                showAlert: true,
                alertText: "You have typed too many characters."
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    <asp:Label ID="Label1" runat="server" Text="Description"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

The above program limits the number of characters and displays the character count as text is typed.


Validate Maximum Length of Multiline Textbox using Jquery, Set Maximum Length to Multiline Textbox using Jquery , Maximum Length for Multiline Textbox, Limit the number of characters in Multiline Textbox using Jquery.

0 comments:

Post a Comment

 
Top