CODEWITHSUNDEEP
javascripthtmlforms
peirix
peirix

Reputation: 37741

setting maxlength using javascript

I'm trying to set the maxlength on input fields dynamically using JavaScript. Apparently that is a problem in IE, and I found part of the solution.

$("input#title").get(0).setAttribute("max_length", 25);
$("input#title").get(0).setAttribute(
                        "onkeypress", 
                        "return limitMe(event, this)");

function limitMe(evt, txt) {
    if (evt.which && evt.which == 8) return true;
    else return (txt.value.length < txt.getAttribute("max_length");
}

It works in Firefox, but not in IE for some reason. However, it works on input fields set like this:

<input type="text" max_length="25" onkeypress="return limitMe(event, this);"/>

But since the input fields are created dynamically, I can't do this... Any ideas?

Upvotes: 9

Views: 53030

Answers (7)

adriendenat
adriendenat

Reputation: 3475

All the answers here relies on keypress/paste events. Here is my solution using the input event:

$('input').on('input', onInput);

var inputValue = '';

function onInput(e) {
    if(e.currentTarget.value.length > 30) {
        e.currentTarget.value = titleValue;
        return;
    }

    inputValue = e.currentTarget.value;
}

Upvotes: 1

Thierry
Thierry

Reputation: 41

IE is case sensitive on setAttribute() and only "maxLength" works...

var el=document.createElement('input'); el.setAttribute('maxLength',25);

Upvotes: 3

kernel
kernel

Reputation: 3743

Because I had some trouble with the answer from @James I wrote sth that worked even when copy-pasting stuff, and especially when working with IE8 and down. My implementation uses jQuery and its live-events.

jQuery(function () {
    $('body').on('keydown.maxlength_fix', 'textarea[maxlength]', function (e) {
        var $this = $(this);
        window.setTimeout(function () {
            var val = $this.val();
            var maxlength = $this.attr('maxlength');
            if (val.length > maxlength) {
                $this.val(val.substr(0, maxlength));
            }
        }, 4);
    });
});

Upvotes: 0

marcias
marcias

Reputation: 236

My code also print out the written/max characters, ignore that part. 

$("[maxlength]").bind("keyup focusin", function(){
    var maxkey = $(this).attr("maxlength");
    var length = $(this).val().length;
    var value = $(this).val();
    $(this).parent().find(".counter").text(length+"/"+maxkey);
    if (length > maxkey) $(this).val(value.substring(0, maxkey));
}).bind("focusout", function(){$(this).parent().find(".counter").text("")});

Upvotes: 0

Ian Oxley
Ian Oxley

Reputation: 11056

Don't forget though that if you are setting the maxlength via JavaScript, someone else could just as easily change the maxlength to whatever they like. You will still need to validate the submitted data on the server.

Upvotes: 2

James
James

Reputation: 111900

If you're using jQuery then why not make full use of its abstractions?

E.g.

Instead of:

$("input#title").get(0).setAttribute("max_length", 25);
$("input#title").get(0).setAttribute(
                        "onkeypress", 
                        "return limitMe(event, this)");
function limitMe(evt, txt) {
    if (evt.which && evt.which == 8) return true;
    else return (txt.value.length < txt.getAttribute("max_length");
}

Do this:

$('input#title').attr('maxLength','25').keypress(limitMe);

function limitMe(e) {
    if (e.keyCode == 8) { return true; }
    return this.value.length < $(this).attr("maxLength");
}

Edit: The reason it's not working in IE is probably because of how you attached the 'onKeyPress' handler, via setAttribute. - This isn't the proper way to register event handlers.

Upvotes: 10

John Feminella
John Feminella

Reputation: 311496

The attribute you're looking for is maxlength, not max_length. See here.

Upvotes: 5

Related Questions