Skip navigation

Here is the cross browser javascript code to fix the maxlength property of textarea

Basic html structure
<!-- html structure used -->
<textarea id="remarks" name="remarks" maxlength="20" rows="5" cols="50"></textarea>
<div class="charLeft">characters left:20</div>
<!-- -->

CSS used

/* css used */
.​charLeft​ {color:#ccc;}​
/*  */
// Javascript code used
var restrictCharacters = (function(){

        $("#remarks").bind("keydown keyup", function(e){

    return {
        checkRemarksLength: function(field,e){
            var curLength = field.val().length,
                maxLength = parseInt(field.attr('maxlength')),
                iam = field.attr('name');
            if(e.type == 'keydown'){
                if(curLength > maxLength) return false;
                else this.remarks= field.val();
            if(e.type == 'keyup') {
                if(maxLength - curLength >= 0) $('.charLeft').html('Charecters left: '+(maxLength-curLength));
                else field.val(this.remarks);

Want to play around??


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: