CODEWITHSUNDEEP
javascriptjqueryinputtextbox
shebelaw
shebelaw

Reputation: 4162

Setting maxlength of textbox with JavaScript or jQuery

I want to change the maxlength of a textbox with JavaScript or jQuery: I tried the following but it didn't seem to help:

var a = document.getElementsByTagName('input');
for(var i=0; i<a.length; i++) {
    if((a[i].type!= 'radio')||(a[i].type!= 'checkbox'))
        a[i].maxlength = 5;
}
document.getElementsByTagName('input')[1].maxlength="3";

$().ready(function()
{
    $("#inputID").maxlength(6);
});

What am I doing wrong?

Upvotes: 52

Views: 270062

Answers (9)

Eatsam ul haq
Eatsam ul haq

Reputation: 347

For those who are facing problem like me with accepted answer:

$(document).ready(function()
{
    $("#ms_num").attr('maxlength','6');
});

You may use on focus instead of ready function:

$(document).on('focus', '#ms_num', function() {
{
    $(this).attr('maxlength','6');
});

This will make sure to set the maxlength attribute when the input field is focused or selected.

Upvotes: 1

Evan TOder
Evan TOder

Reputation: 91

<head>
    <script type="text/javascript">
        function SetMaxLength () {
            var input = document.getElementById ("myInput");
            input.maxLength = 10;
        }
    </script>
</head>
<body>
    <input id="myInput" type="text" size="20" />
</body>

Upvotes: 0

user7212232
user7212232

Reputation: 125

<head>
    <script type="text/javascript">
        function SetMaxLength () {
            var input = document.getElementById("myInput");
            input.maxLength = 10;
        }
    </script>
</head>
<body>
    <input id="myInput" type="text" size="20" />
</body>

Upvotes: 0

Knox
Knox

Reputation: 21

$('#yourTextBoxId').live('change keyup paste', function(){
    if ($('#yourTextBoxId').val().length > 11) {
        $('#yourTextBoxId').val($('#yourTextBoxId').val().substr(0,10));
    }
});

I Used this along with vars and selectors caching for performance and that did the trick ..

Upvotes: 2

Div Sol
Div Sol

Reputation: 21

You can make it like this:

$('#inputID').keypress(function () {
    var maxLength = $(this).val().length;
    if (maxLength >= 5) {
        alert('You cannot enter more than ' + maxLength + ' chars');
        return false;
    }
});

Upvotes: 0

Monzur
Monzur

Reputation: 1435

without jQuery you can use

document.getElementById('text_input').setAttribute('maxlength',200);

Upvotes: 11

Eli
Eli

Reputation: 17825

The max length property is camel-cased: maxLength

jQuery doesn't come with a maxlength method by default. Also, your document ready function isn't technically correct:

$(document).ready(function () {
    $("#ms_num")[0].maxLength = 6;
    // OR:
    $("#ms_num").attr('maxlength', 6);
    // OR you can use prop if you are using jQuery 1.6+:
    $("#ms_num").prop('maxLength', 6);
});

Also, since you are using jQuery, you can rewrite your code like this (taking advantage of jQuery 1.6+):

$('input').each(function (index) {
    var element = $(this);
    if (index === 1) {
        element.prop('maxLength', 3);
    } else if (element.is(':radio') || element.is(':checkbox')) {
        element.prop('maxLength', 5);
    }
});

$(function() {
    $("#ms_num").prop('maxLength', 6);
});

Upvotes: 31

Jay
Jay

Reputation: 6294

Not sure what you are trying to accomplish on your first few lines but you can try this:

$(document).ready(function()
{
    $("#ms_num").attr('maxlength','6');
});

Upvotes: 138

hunter
hunter

Reputation: 63522

set the attribute, not a property

$("#ms_num").attr("maxlength", 6);

Upvotes: 5

Related Questions