Monday, July 8, 2013

If you remember I wrote how to limit input field only with numbers. I glad to show you that 6 years does not pass in vain and I find out better (primarily from UX point of view) way to do the same:
function stopEventPropagation(event) {
        if (event && event.stopPropagation) event.stopPropagation();
        if (window.event) window.event.cancelBubble = true;
    }
    function isNumberKey(evt){
        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && charCode != 46 && (charCode < 48 || charCode > 57))
            return false;
        return true;
    }
    <input type="text" onclick="stopEventPropagation(event)" onkeypress="return isNumberKey(event)"/>
    



Also I'd like to take this opportunity to mention that this approach is used on iRuler.net - ruler in actual size, so you can check it out there.