Question

I’m sorry if maybe the question it’s a bit wide guys, but I’ve tried everything and I can’t came with something to replace this (this is not mine, I’m just using it):

    function onlyNum(evt){

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

        return true;
    }

// this INPUT will not accept anything but numbers now.
<input type="text" id="idInput" onKeyPress="return onlyNum(event)">

with this:

    function onlyNum(evt){

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

    return true;
}

// this INPUT's with this event listeners will just acept numbers now.
// like this code is cleaner since you just need to make a list of ids that will have this listeners.
var input = document.getElementById('idTest');
input.addEventListener('keyDown', onlyNum, false);

I can’t find a way to pass the event to the function and the “return” part. Sorry I don’t even know how to describe it and maybe that’s why I cannot find any info about this problem…

Answer 1

When using generic event handlers with addEventListener() or attacheEvent(), you can’t just return false to prevent the default action like you can if you put the event handler in the HTML. Instead, you need to call evt.preventDefault() and perhaps evt.stopPropagation() in most browsers or set window.event.returnValue = false and window.event.cancelBubble = true in older versions of IE.

To do that simply and cross platform, I’ve developed an addEvent() function that does all the cross platform work for you (including IE6, IE7, IE8). So, using that to add the event handler, all you would do is this:

addEvent("idTest", "keydown", onlyNum);​

Working demo: http://jsfiddle.net/jfriend00/2ATmz/.

Here’s your code using the new event function:

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

addEvent("test", "keydown", onlyNum);​

And, here’s the cross platform event function:

// refined add event cross browser
function addEvent(elem, event, fn) {
    if (typeof elem === "string") {
        elem = document.getElementById(elem);
    }


    // avoid memory overhead of new anonymous functions for every event handler that's installed
    // by using local functions
    function listenHandler(e) {
        var ret = fn.apply(this, arguments);
        if (ret === false) {
            e.stopPropagation();
            e.preventDefault();
        }
        return(ret);
    }

    function attachHandler() {
        // set the this pointer same as addEventListener when fn is called
        // and make sure the event is passed to the fn also so that works the same too
        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);
    }
}

Note: I slightly modified onlyNum() because this event handler function always passed the event object (you don’t have to handle things differently for IE).