RSS

Limiting maximum characters that can be entered in text box

28 Feb

you might be a asp.net developer or web developer who needs to show to the user simply that maximum number of characters that can be entered in a text box and prevent user typing additional characters.
limiting text box max typing length

limiting text box max typing length

limiting text box max typing length

you can achieve it with small javascript object. So your HTML might look like this.

<span>
Brief Text 
  <br>
   <span id="msg">(125 Maximum Characters)
   </span>
</span>


Here the span id named “msg” is the label that user will be informed with number of characters left.
Here is the javascript which will do the job.

<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    // jQuery is not loaded
    alert("jquery is not loaded");
}

var yourJsNameSpace = yourJsNameSpace || {};



yourJsNameSpace.TextLengthValidation = function (maxChars, txtBoxName, outputLbl) {

    var _txtBoxObj = $(txtBoxName);
    var _outputLbl = $(outputLbl);
  
    var validateCharLength = function () {

        _txtBoxObj.keyup(function (e) {
            var len = $(this).val().length;
            if (len &gt; maxChars) {
                this.value = this.value.substring(0, maxChars);
                e.preventDefault();
                _outputLbl.text("Max Chars. Exceeded " + maxChars);
            }
            else {
                _outputLbl.text(maxChars - len + " Chars. Left");
            }
        });
    };


    return {
        validate: validateCharLength    
    }
}
</script>

Yes this script uses jquery but you can simply remove dependency by writing couple of document.getElementById if you don’t like jquery for this simple task and its overkill for this kind of simple task.(but still jquery is too good!! :)) So you can use this javascript function in any of your webpage by passing 3 parameters.
So what you have to do in your web page is following,


<script type="text/javascript">
window.onload = function () {
            var val1 = new reddotJsLib.TextLengthValidation(24, '#txtHomePageBottomBriefText', '#msg');
            val1.validate();
}
</script>

the first parameter passed to the function is maximum characters user can enter. and the second parameter is textbox name and the third is the name of output message label.

You can use this in asp.net pages as well but make sure clientid mode is set accordingly or make sure to get client id of the text box and label correctly. Caution : Still you have to validate the input from server whether the input is not tampered with other tools and length is not exceeded.

Its always recommended to add these scripts in separate javascript files. This function does not define all variables in in global space which is always good and the most obvious mistake that many novice javascript developers does. variables are wrapped in validateCharLength closure function and it defines that function in “javascript name space” so there is less chance of overwriting the funciton in other scripts.

Advertisements
 
Leave a comment

Posted by on February 28, 2012 in ASP.NET, CSS, Javascript

 

Tags: ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: