Question

I’m using jQuery for redirect F1-F10 keys in web browser (MFF or chrome):

$('*').live("keydown", function(e) {
  if (e.keyCode == 112) 
  {
    document.getElementById('form:f1').click();
    return false;
  }
});

So, when I press F1, instead of browsers own HELP the button with ID form:f1 is fired.
And it works properly, but sometimes not.

E.g. 10 times I start the web app (browser) and redirecting is working properly, and at the 11th start of the browser, it doesn’t work suddenly and I have to restart browser.

All other javascript or jQuery functions are working always, but redirecting doesn’t.

Don’t you know where could be the problem?

Answer 1

Although it’s hard to see what the exact problem is, there are problems or bad practices in all lines.

• There is no point binding a live event to all elements, instead do what live does, and take advantage of event bubbling. Only bind the keydown event of the document.

• Use e.which to check the pressed key, jQuery normalizes the event object, so it works in all browsers.

• For consistency, use jQuery selector instead of document.getElementById.

• Try to avoid using special characters in IDs, you’re better off treating them as identifier names in most programming languages. Use form_f1 instead of form:f1.

• Use e.preventDefault() instead of return false.

Also make sure that the focus is somewhere within your document when you press F1, i.e. it’s not on the address bar or any other button/element of your browser UI.

If you’re using e.stopPropagation() on keydown events anywhere, that would stop the event from bubbling up the DOM, falling back to default hotkey functionality.

The following code works for me consistently all the time in FireFox 5 and Google Chrome 12.

$(document).keydown(function(e){
    if(e.which == 112){
        $('#form_f1').click();
        e.preventDefault();
    }
});