Please disable your adblock and script blockers to view this page

jQuery to limit and display number of characters left in multiline textbox | Prevent copy and paste characters in the textbox more than the specified limit

How to limit and display number of character left in multiline textbox
Click on image to enlarge
Introduction: In this article i am going to explain how using jQuery we can set maximum allowed characters and also count and display number of remaining characters in multiline textbox (TextArea) or simple textbox while typing in textbox or we can say prevent/avoid/limit the numbers of characters to be entered in the textbox. 
Even you can't copy and paste characters in the textbox more than the specified limit.

Description: While working on project i got the requirement to create a web page where users can post their feedback/suggestion/comments.  But i want to fix the number of characters that can be entered in the textbox and also want to show remaining characters in textbox.  Here in this article example you will learn how to perform this task easily using jQuery.

Implementation:  Below is the HTML Source of the page having the controls and jQuery script required for this demonstration.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head runat="server">
<script src="" type="text/javascript"></script>
   <script type='text/javascript'>
        $('#spnCharLeft').css('display', 'none');
        var maxLimit = 100;
        $(document).ready(function () {
            $('#<%= txtComments.ClientID %>').keyup(function () {
                var lengthCount = this.value.length;              
                if (lengthCount > maxLimit) {
                    this.value = this.value.substring(0, maxLimit);
                    var charactersLeft = maxLimit - lengthCount + 1;                   
                else {                   
                    var charactersLeft = maxLimit - lengthCount;                   
                $('#spnCharLeft').css('display', 'block');
                $('#spnCharLeft').text(charactersLeft + ' Characters left');
    <form id="form1" runat="server">
    <div style="width:300px;">
    <legend>Enter your feedback/suggestion/comment</legend>   
        <asp:TextBox ID="txtComments" runat="server" TextMode="MultiLine" Rows="4" Columns="50"
            placeholder="Maximum limit: 100 characters"></asp:TextBox><br />
        <span id="spnCharLeft"></span>

Now over to you:
" I hope you have learned how to prevent entering more characters than the specified limit using jQuery with this example and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily.. ConversionConversion EmoticonEmoticon