Limit number of characters in input field

I want to use jquery to limit the number of characters in an editable div (or form input).

Answers


As for input field you can use maxlength attribute. If you are looking for div, check the following,

        $(function() {

            $ ('#editable_div').keydown ( function (e) {
                //list of functional/control keys that you want to allow always
                var keys = [8, 9, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145];

                if( $.inArray(e.keyCode, keys) == -1) {
                    if (checkMaxLength (this.innerHTML, 15)) {
                        e.preventDefault();
                        e.stopPropagation();
                    }
                }
            });

            function checkMaxLength (text, max) {
                return (text.length >= max);
            }
        });

        <div id="editable_div" contentEditable="true" onclick="this.contentEditable='true';" >TEXT BEGIN:</div>

Edit: you should rewrite the checkMaxLength function to ignore tabs and newline


make use of maxlength in input tag

<input type="text" maxlength="20" /> 

Maxlength attribute- for browser, that support this feature. Javascript - for others.

<input class="test-input" type="text" maxlength="12" />
<script>
$('.test-input').unbind('keyup change input paste').bind('keyup change input paste',function(e){
    var $this = $(this);
    var val = $this.val();
    var valLength = val.length;
    var maxCount = $this.attr('maxlength');
    if(valLength>maxCount){
        $this.val($this.val().substring(0,maxCount));
    }
}); 
</script>

http://jsfiddle.net/tvpRT/


This should work for you I think.

HTML

<input type="text" name="myText" id="myText" data-maxlength="10" />

jQuery

$('#myText').keyup(validateMaxLength);

function validateMaxLength()
{
        var text = $(this).val();
        var maxlength = $(this).data('maxlength');

        if(maxlength > 0)  
        {
                $(this).val(text.substr(0, maxlength)); 
        }
}

If you want to make use of JQuery you can write something yourself or just use an existing plugin such as this one.

But I agree with dku.rajkumar... What is wrong with using the maxlength attribute?

<input type="text" maxlength="15" />

If you're the biggest JQuery fan ever though and desperately want to set a maxlength to all of the input fields at once do something like:

$(document).ready(function() {
   $('input[type="text"]').attr({ maxLength : 15 });
});

Just keep in mind though that this method (the JQuery one) will not work for people who have (for any reason whatsoever) JavaScript disabled. While the maxlength attribute of the input tag works for everybody on all browsers.


Let's say it is form input. you can do it with 'maxlength' attribute but if you say 'using jQuery', here's the solution.

$('input#limited').attr('maxlength', '3'); 

or you can check every keypress

$('input#limited').keypress(function() {
     /*
     check for 3 or greater than 3 characters.
     If you check for only greater than 3, then it will let
     you write the fourth character because just before writing,
     it is not greater than three.
     */
     if($(this).val().length >= 3) {
        $(this).val($(this).val().slice(0, 3));
        return false;
    }
});

just use attribute called "maxlength". You can read more about input's attributes at w3 input


 $('#id').keypress(function(e) {
   var foo = $(this).val()
     if (foo.length >= 14) { //specify text limit
        return false;
        }
    return true;
 });

Need Your Help

In game programming are global variables bad?

c++ global-variables

I know my gut reaction to global variables is "badd!" but in the two game development courses I've taken at my college globals were used extensively, and now in the DirectX 9 game programming tutor...

How does Google Analytics send data back to Google?

javascript google-analytics

Perhaps I am missing something, but I am just learning javascript.