I'm building a web application in Chrome and I need some shortcut keys and want to use the function-keys.

However, F1 triggers Help window, F3 triggers page search, F5 refreshes etc. etc. I want to overrule these keys, as they are of no use in my context.

But ... I can't prevent the defaults from being triggered. Here is my code:

$(document).keyup(function(e) {

    // GET KEYCODE
    var keyCode = e.keyCode;                            //alert(keyCode);

    // CHECK KEYBOARD CONTEXT
    var keyboardContext = $('#keyboard-context').attr('data-context');

    // JS KEYCODES FOR FUNCTION KEYS
    var functionKeys = new Array(112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123);
    var keyNames = new Array('F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12');

    // CONVERT KEYCODE INTO KEYNAME, FOR EASE OF BINDING IN DOM
    for (var i = 0; i < functionKeys.length; i++) { if (functionKeys[i] === keyCode) { keyCode = keyNames[i]; } }

    // MAKE SURE THAT THE QUICK LAUNCH SHORTCUT KEY, ALWAYS LAUNCHES THE QUICKNAV
    if (keyCode === 'F1') {
        $('.keyboard-shortcut').each(function() {
            if ($(this).data('shortcut-key') === keyCode && $(this).hasClass('load-small-content') && $(this).attr('data-keyboard-context') === 'launch-quick-nav') {
                loadSmallContent($(this).data('load-from'));
            }
        });

    }

    // PREVENT DEFAULT FOR FUNCTION KEYS
    if (functionKeys.indexOf(keyCode) > -1) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
});

What can I do to prevent e.g. F1 from opening the Help page?

I'm building a web application in Chrome and I need some shortcut keys and want to use the function-keys.

However, F1 triggers Help window, F3 triggers page search, F5 refreshes etc. etc. I want to overrule these keys, as they are of no use in my context.

But ... I can't prevent the defaults from being triggered. Here is my code:

$(document).keyup(function(e) {

    // GET KEYCODE
    var keyCode = e.keyCode;                            //alert(keyCode);

    // CHECK KEYBOARD CONTEXT
    var keyboardContext = $('#keyboard-context').attr('data-context');

    // JS KEYCODES FOR FUNCTION KEYS
    var functionKeys = new Array(112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123);
    var keyNames = new Array('F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12');

    // CONVERT KEYCODE INTO KEYNAME, FOR EASE OF BINDING IN DOM
    for (var i = 0; i < functionKeys.length; i++) { if (functionKeys[i] === keyCode) { keyCode = keyNames[i]; } }

    // MAKE SURE THAT THE QUICK LAUNCH SHORTCUT KEY, ALWAYS LAUNCHES THE QUICKNAV
    if (keyCode === 'F1') {
        $('.keyboard-shortcut').each(function() {
            if ($(this).data('shortcut-key') === keyCode && $(this).hasClass('load-small-content') && $(this).attr('data-keyboard-context') === 'launch-quick-nav') {
                loadSmallContent($(this).data('load-from'));
            }
        });

    }

    // PREVENT DEFAULT FOR FUNCTION KEYS
    if (functionKeys.indexOf(keyCode) > -1) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
});

What can I do to prevent e.g. F1 from opening the Help page?

• javascript
• jquery
• keyboard-events

• quirksmode/js/keys.html link may help you – Manish Jangir Commented May 18, 2013 at 9:53
• Sorry, no help found there... – EibergDK Commented May 18, 2013 at 11:15

1 Answer 1

I worked out a solution. The following should just be included anywhere in a .js file...

function disableFunctionKeys(e) {
    var functionKeys = new Array(112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 123);
    if (functionKeys.indexOf(e.keyCode) > -1 || functionKeys.indexOf(e.which) > -1) {
        e.preventDefault();
    }
};

$(document).ready(function() {
    $(document).on('keydown', disableFunctionKeys);
});

For preventing other keys than the F-keys, just put the JS keycode into the array :)