Overriding the F1 key in FF, chrome, ie. Is F1 on

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

You can not use keys F1-F12 cross-browser. Try this demo. http://jshotkeys.googlepages.com/test-static-01.html

Answer 2

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. :)

Answer 3

Use keydown instead of keyup with preventDefault because chrome using with keydown if you used keyup chome already triggered help page.

    if (e.key === "F1") {
        e.preventDefault();
        //Do Code Here
    };

Answer 4

A plain document.addEventListener on keydown worked for me on Chrome.

var util = { };

document.addEventListener('keydown', function(e){

    var key = util.key[e.which];
    if( key ){
        e.preventDefault();
    }

    if( key === 'F1' ){        
      // do stuff
    }
})

util.key = { 
  9: "tab",
  13: "enter",
  16: "shift",
  18: "alt",
  27: "esc",
  33: "rePag",
  34: "avPag",
  35: "end",
  36: "home",
  37: "left",
  38: "up",
  39: "right",
  40: "down",
  112: "F1",
  113: "F2",
  114: "F3",
  115: "F4",
  116: "F5",
  117: "F6",
  118: "F7",
  119: "F8",
  120: "F9",
  121: "F10",
  122: "F11",
  123: "F12"
}