Input - number & max length validator

isNumber & restrictToLength keypress event handlers

by Daan De Smedt

HTML

<input type="text" style="width:50%;" placeholder="Restrict to numbers and max length of 5" class="textfield" value="" onkeypress="return isNumber(event, this) && restrictToLength(event, this, 5);" />

<br/><br/>

<input type="text" style="width:50%;" class="textfield" placeholder="Restrict to max length of 20"  value="" onkeypress="return restrictToLength(event, this, 20);" />

CSS

qs

JavaScript

function isNumber(evt){
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

function restrictToLength(evt, element, lengthLimit){
    return (element.value.length < lengthLimit);
}