How to make this Javascript function work in IE Browser?

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)" />

Show how `AllowOnlyDigit` is being called. It might be better to do `ev.preventDefault();` (`ev.returnValue = false;` in IE) to stop the keystroke. You might want to try `keydown` instead of `keypress` — Ian, Jun 17 '13 at 14:05
@Kami Read the question. They say it works fine in all browsers except IE 8 and earlier — Ian, Jun 17 '13 at 14:09
The problem might be the JS way of handling key event as you can see here it has different key code for different keys numpad or keyboard. http://www.javascripter.net/faq/keycodes.htm — Onur Topal, Jun 17 '13 at 14:10
@Ian I have IE 8 locally, tested it and works as expected. Hence my query. — Kami, Jun 17 '13 at 14:13
@Kami I completely understand, I know you claimed it works in IE 8, I'm just saying that the OP already pointed out what browsers they're having trouble in. Too often do people come to StackOverflow and say it "doesn't work" in certain browsers, but when we test it works fine — Ian, Jun 17 '13 at 14:14
Sorry, I should have been more specific, it is not working on : IE8 Standards mode — Shiva, Jun 17 '13 at 14:16
@Shiva please add a line `console.log(key)` and show the output of the developer console (F12). It's working in IE for me (IE10 in IE8 mode). — Christoph, Jun 17 '13 at 14:19

score 1 · Answer 1 · edited May 23 '17 at 11:50

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

score -1 · Answer 2 · answered Jun 17 '13 at 14:05

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(); 
        }   
    }

Wasn't the downvoter, but I noticed that your solution involves including jquery, which may be unavailable (burninggramma's comment may clarify this) — Chris Forrence, Jun 17 '13 at 14:07
I've once wrote the whole controlling for a nuclear reactor with jquery. — Christoph, Jun 17 '13 at 14:09

epascarello · Answer 3 · 2013-06-17T14:12:14.437

-1

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

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

edited Jun 17 '13 at 14:12

answered Jun 17 '13 at 14:05

epascarello

204,599
20
195
236

How to make this Javascript function work in IE Browser?

3 Answers3

Linked