How to make this Javascript function work in IE Br

Question

The purpose of this JAVSCRIPT function is to prevent users from entering any alpha characters. If user enters those characters, the cursor does not move at all and stays at the same place. However if user enters a digit, cursor moves to the next position.

For example, in this text field, I only allow users to enter digits only. This method is working fine in all browsers except IE 8 and earlier. I tested it on Firefox, Chrome, and Safari and even in Safari emulator with no issues. If anybody guide me or even suggest me to modify my method so that it also works fine in IE that would be great help!!! Thank you

function AllowOnlyDigit(e) {
     var ev = e || window.event;
     var key = ev.keyCode || ev.which || ev.charCode;

     if (key > 31 && (key < 48 || key > 57)) {
         return false;
     }
     return true;
 }

and this is how I am invoking this method :

<input type="text" onkeypress="return AllowOnlyDigit(event)" />

Answer 1

I would not use inline javascript but add the event listener from a script. I would then use a function to allow cross-browser event listeners to be added (in this example addEvent). I would probably do your AllowOnlyDigit differently too, but leaving it as is then you could try this. I don't have IE8 (or any windows products) to test with but it should work.

HTML

<input type="text" />

Javascript

function addEvent(elem, event, fn) {
    if (typeof elem === "string") {
        elem = document.getElementById(elem);
    }

    function listenHandler(e) {
        var ret = fn.apply(this, arguments);

        if (ret === false) {
            e.stopPropagation();
            e.preventDefault();
        }

        return (ret);
    }

    function attachHandler() {
        window.event.target = window.event.srcElement;

        var ret = fn.call(elem, window.event);

        if (ret === false) {
            window.event.returnValue = false;
            window.event.cancelBubble = true;
        }

        return (ret);
    }

    if (elem.addEventListener) {
        elem.addEventListener(event, listenHandler, false);
    } else {
        elem.attachEvent("on" + event, attachHandler);
    }
}

function AllowOnlyDigit(e) {
    var ev = e || window.event,
        key = ev.keyCode || ev.which || ev.charCode;

    if (key > 31 && (key < 48 || key > 57)) {
        return false;
    }

    return true;
}

addEvent(document.getElementsByTagName("input")[0], "keypress", AllowOnlyDigit);

On jsfiddle

Answer 2

You can use this jquery function to enable only digites, points, comma:

$('input').keydown(function(event) {
    // Allow: backspace, delete, tab, escape, and enter
    if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || event.keyCode == 188 || event.keyCode == 190 || 
         // Allow: Ctrl+A
        (event.keyCode == 65 && (event.ctrlKey === true || event.metaKey)) || 
         // Allow: home, end, left, right
        (event.keyCode >= 35 && event.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }
    else {
        // Ensure that it is a number and stop the keypress
        if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
        }   
    }

Answer 3

You need to swap onkeypress for onkeydown so you can cancel the event properly.

<input type="text" onkeydown="return AllowOnlyDigit(event)" />