Click here to Skip to main content
Click here to Skip to main content

ASP.NET/MVC3 Limit/Count number of characters in TextArea/Textbox

, 5 Sep 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
An article demonstrates on how to create/use jQuery to limit/count the number of Characters in a TextArea or Text Field.

An article demonstrates on how to create/use jQuery to limit/count the number of Characters in a TextArea or Text Field.

limit textarea characters

Table of contents

Introduction

Lately, I was revising the article ASP.NET - Limit number of characters in TextBox control that I wrote nearly two years ago. I decided to take the opportunity to improve it and brush up my jQuery skills. In this article, I will share with everyone on how to implement this using jQuery. You can use this jQuery plug-in limit_textarea to limit and count the number of characters in the TextArea or TextBox with multiline text mode on client-side only. The sample codes include an example on how to use the plug-in with ASP.NET web forms, HTML and MVC 3 pages.

Implementation

In this version, the plug-in accept three optional parameters namely maxLength, displayText and displayTextPosition. The maxLength parameter allows us to specify the maximum number of characters in the TextArea. There is also an option to customize the ending display text through the displayText property. Last but not least, the displayTextPosition provide the flexibility to specify the location of the display text message. The valid values are topLeft, bottomLeft, topRight and bottomRight. By default, the maximum allowable characters is 500, display text message is " characters left" and the text position is on top left.

There are three functions inside the plug-in, namely createLabel, trimEnter and validateLimit. Shown in Listing 1 is the createLabel function. It responsible to create the display message based on the displayText and displayTextPosition parameters. The display message is place inside the HTML span tag and its ID is the combination of the TextArea object ID and the static text "_lbl". The display text position is calculated by using the TextArea object position, width and height. The formula to derive the text position was from trial and error, you are welcome to enhance it.

Listing 1

this.createLabel = function (txtArea, options) {
            var txtAreaID = txtArea.attr("id");
            var labelID = txtAreaID + "_lbl";
            //textarea position
            var txtLeftPos = $("[id='" + txtAreaID + "']").position().left;
            var txtTopPos = $("[id='" + txtAreaID + "']").position().top;

            var displayLabel = $('<span id=' + labelID + '>' + 
options.displayText + '</span>')
            .css({ position: 'absolute', height: 15, padding: 2,
                'font-size': '75%', display: 'inline-block'
            });
            //attach the label to text area
            txtArea.after(displayLabel);
            //position
            switch (options.displayTextPosition) {
                case 'topRight':
                    displayLabel.css({ top: txtTopPos - 18, 
left: txtArea.width() - $("[id='" + labelID + "']").width() - 5 });
                    break;
                case 'bottomLeft':
                    displayLabel.css({ top: txtTopPos + txtArea.height() + 5, left: txtLeftPos });
                    break;
                case 'bottomRight':
                    displayLabel.css({ top: txtTopPos + txtArea.height() + 5, 
left: txtArea.width() - $("[id='" + labelID + "']").width() - 5 });
                    break;
                default:
                    displayLabel.css({ top: txtTopPos - 18, left: txtLeftPos });
                    break;
            }
            //initialize
            limit_textarea.validateLimit(txtArea, options);
            return true;
        }

The trimEnter function in Listing 2 will replace the carriage returns or newlines in the TextArea with an empty string.

Listing 2

//remove paragraph break from the textarea
        this.trimEnter = function (dataStr) {
            return dataStr.replace(/(\r\n|\r|\n)/g, "");
        }

Similar to previous version, the purpose of validateLimit function is to make sure the text enter does not exceed the maximum number of allowable characters and to display the count. Unlike the previous version, this function will add the the carriage returns or newlines count into the maxLength. This way it will display the text in the TextArea correctly when the remaining characters equal to zero instead of truncating the text.

Listing 3

this.validateLimit = function (txtArea, options) {
            var txtValue = txtArea.val();
            var txtAreaID = txtArea.attr("id");
            var labelID = txtAreaID + "_lbl";
            //get the paragraph break count
            var lineBreakMatches = txtValue.match(/(\r\n|\r|\n)/g);
            var lineBreakCount = lineBreakMatches ? lineBreakMatches.length : 0;
            //remaining character left
            var remaningChar = options.maxLength - limit_textarea.trimEnter(txtValue).length;
            if ($("#" + labelID).length) {
                $("#" + labelID).html(remaningChar + options.displayText);
                if (Number(remaningChar) <= Number(0)) {
                    txtArea.val(txtValue.substring(0, options.maxLength + lineBreakCount));
                    $("#" + labelID).html("0" + options.displayText);
                    return false;
                }
                else
                { return true; }
            }
            return true;
        }
    }

The code in Listing 4 will trigger the function when user copy and paste or cut using mouse. It will wait for 250 milliseconds before calling the validateLimit function because the text in the TextArea will not be available immediately after the paste.

Listing 4

        $(this).bind('cut paste', null, function (e) {
            if (!e.keyCode) {
                var ctrl = $(this);
                setTimeout(function () {
                    limit_textarea.validateLimit(ctrl, options);
                }, 250);
            }
        });

The code in Listing 5 will trigger the function when user enters the text into the TextArea.

Listing 5

$(this).keyup(function (e) {
            limit_textarea.validateLimit($(this), options);
        });

The code in Listing 6 is a work around to trigger the function when user deletes the text in the TextArea using the mouse. The problem with that is it will get trigger every time the user left click the mouse in the TextArea. You can delete or comment out the codes if you don’t need it in your application.

Listing 6

        //make sure the count is up-to-date
        $(this).mousedown(function (e) {
            if (!e.keyCode) {
                //left mouse click
                if (e.which === 1) {
                    var ctrl = $(this);
                    setTimeout(function () {
                        limit_textarea.validateLimit(ctrl, options);
                    }, 250);
                }
            }
        });

Using the code

Include the jQuery library and the plug-in and as many TextArea control/element as you want into the web page. Please refer to listing 7 on how to call the plug-in.

Listing 7

<script type="text/javascript">
    $(document).ready(function () {
        $("[id$='TextBox1']").limit_textarea({ maxLength: 100, displayText: ' Letters left.' });
        $("[id$='TextBox2']").limit_textarea({ maxLength: 200, displayTextPosition: 'bottomLeft' });
        $("[id$='TextBox3']").limit_textarea({ displayTextPosition: 'bottomRight' });
        $("[id$='TextArea1']").limit_textarea();
        $("[id$='TextArea2']").limit_textarea({ maxLength: 125 });
    });
</script>

Conclusion

I hope someone will find this information useful and make your programming job easier. If you find any bugs or disagree with the contents or want to help improve this article, please drop me a line and I'll work with you to correct it. I would suggest downloading the demo and explore it in order to grasp the full concept of it because I might miss some important information in this article. Please send me an email if you want to help improve this article.

browsers

Tested on IE 7.0/8.0/9.0, Google Chrome 24.0.1312.57, Firefox 18.0.2, Safari 5.1.7

History

- 05/20/2010 - v01.00.00
- 02/16/2013 - v02.00.00 
- 09/06/2013 - v02.00.01 - Updated JavaScript to update count during long key press and undo

Resources

http://stackoverflow.com/questions/686995/jquery-catch-paste-input
http://lawrence.ecorp.net/inet/samples/regexp-format.php
http://docs.jquery.com/Plugins/Authoring

Watch this script in action

Demo
Demo (MVC 3) 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Bryian Tan
Software Developer
United States United States
I have over three years of experience working with Microsoft technologies. I have earned my Microsoft Certified Technology Specialist (MCTS) certification. I'm a highly motivated self-starter with an aptitude for learning new skills quickly.

Comments and Discussions

 
GeneralMy vote of 4 PinmemberGregoryW5-Sep-13 21:38 
Questionabout text charactercount when i will do long keypress Pinmemberswethayk16-Aug-13 3:30 
AnswerRe: about text charactercount when i will do long keypress PinmemberBryian Tan5-Sep-13 20:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150301.1 | Last Updated 6 Sep 2013
Article Copyright 2013 by Bryian Tan
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid