Question

I’m creating namespaced events with jquery. When I use the following function with code=112, a function, bool=false, everything works fine in FF and the F1 key submits to my function and the event does not bubble up to open the firefox help in a new tab.

function bindKeyFunc(code, func, bool){
    $(document).bind('keypress.' + code, function(e){
        var c = (e.keyCode ? e.keyCode : e.which);
        //console.log(c);
        if ( code == c) {
            //e.stopPropagation();
            //e.preventDefault();
            func();
            return bool;
        }
    });
}

In chrome and ie8 my event listener does not fire and the regular help occurs instead, even if I uncomment the stopPropagation and preventDefault calls.

Similarly, when I try to take over the <tab> key for my own purposes, it works splendidly in FF but my event doesn’t fire in chrome or ie8 and the default action for the tab fires instead:

    $('input#manual-total').bind('keypress.dep', function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if ( code==9 ){
            $('div#formset').show();
            $(next).focus()[0].select();
            return false;
        }
    });

Answer 1

Good luck. Mapping of special keys in browsers is a mess. In particular, IE certainly does not fire keypress events for function keys at all. onkeydown/up may work on IE, though. Many keys are handled incorrectly, in different ways by different browsers. I strongly doubt there is a cross-browser method of handling F1. Sorry; I know that’s not the answer you wanted, but I believe it’s the truth.

Do read the linked article, particularly the occasional warnings about “When I discovered that I decided not to risk my sanity by performing further punctuation character experiments.” and the like. 🙂