Best way to capture all key events for a web application?

Question

I'm a litle distraught at the current state of key capturing for web applications. It works great as long as you know your user is going to be typing in a specific place (eg an input field), but as soon as you want to do global shortcuts for an entire "application", it seems to fall apart.

I'm trying to find out if there is a better way to capture all the key events for a web page than the method I am currently using.

My current method is to use the JQuery Hotkeys plugin, bound to the document element, ie:

$(document).bind("keyup", "delete", function() {});

That works great for most purposes, but for example on Firefox, if the user happens to absentmindedly move their mouse over the navigation bar, the delete key will sometimes result in the user going "back", and the key is never received by the handler so that I can stop propagation.

Is there a different element I should be binding to? Is there a better plugin out there for this? Should I just avoid using any keys that are bound to things in common web browsers?

As more and more web applications look to mimic their desktop counterparts, it seems like this is a basic feature that web developers will increasingly require.

EDIT: I should point out that I am already using e.stopPropagation() and e.preventDefault() . The main problem seems to be that sometimes the event is never even passed to the bound function. I am basically wondering if anyone has figured out a "higher" element to bind to other than document . Or is there an alternative I have never even thought of? Embedding an invisible Flash element on the page and then passing all keys from that to Javascript, for example (I don't think this would work).

I think, at this point, I am doing things the "standard, well-known way." I am trying to see if there is an outside-the-box way that isn't widely known that maybe someone on SO knows about :-).

Answer 1

If you are making a sophisticated web-app with customized keyboard controls, the first thing you should do is alert the user that you are making a sophisticated web-app with customized keyboard controls. After that, tell them what the controls are and what they do.

Binding the keypress and keydown listeners to the document is the correct way to do it, but you have to remember to preventDefault and/or stopPropogation for keypresses that you want to override. Even if there is no default behavior, you will need to prevent them from cascading in case the user has rebound their default keyboard shortcuts.

Also, you will only be able to receive keyboard input when the page has focus.

When you say Delete I assume you mean the Backspace key as Delete generally referrs to the key next to Insert , Home , End , Page Up and Page Down .

Edit to add:

Be very careful about which keys you choose to override. If you're making an app to be used by people other than yourself, you have to worry about usability and accessibility. Overriding the Tab , Space and Enter keys is risky, especially for people using screen-readers. Make sure to test the site blind and fix any issues that may arise with traversing the page via the keyboard.

Answer 2

maybe you can use html-attribute ACCESSKEY and react onfocus. ie:

<input type="text" size="40" value="somefield" accesskey="F">

i think u might need to add a tabindex to tags like <div>

<div id="foo" tabindex="1" accesskey="F">

Answer 3

You can't bind to events that happen where you have no control - eg the window chrome. The way most webapps deal with this is asking the user to confirm their decision to leave the page, using the onbeforeunload event:

window.onbeforeunload = function (e) {
    var str = 'Are you sure you want to leave this page?';
    e = e || window.event;

    if (userHasSomeUnsavedWork) {
        e.returnValue = str;
        return str;
    }
}

• onbeforeunload - MDC

Answer 4

绝对没有经过测试但是......试试'window'元素。