How do I have YAHOO.util.KeyListener disabled when an input element is focused?

Question

I have a MenuBar setup with YUI's MenuBar widget, and I have a YAHOO.util.KeyListener attached to document to get quick keyboard access to the menus and sub-menu items (e.g. 's' to open the Setup menu). The problem is that the keylistener will still fire when a user is in an input element. For example, a user might be typing soup into a text field, and the 's' character will cause the Setup menu to pop open.

One solution would be to disable the keylistener when focus is on an input element, and enable it on blur. How would I go about doing this? Is there a better solution?

Answer 1

I commend you for trying to provide keyboard shortcuts, but be aware that this will be a bit of a pain to implement cross-platform. If it's feasible, I strongly recommend using access keys on <a> tags.

If you're still going, I guess accesskey won't work for you. I'll assume you've read the relevant YUI tutorial.

If blur and focus are really the right way to go, I'd use something like

YAHOO.util.Event.onDOMReady(init);
function init() {
    // set up the keyboard listeners

    setUpExceptionsToKeyboardShortcuts();
}

function disableShortcuts() {
    // Do what you've got to do
}

function enableShortcuts() {
    // Do what you've got to do
}

function setUpExceptionsToKeyboardShortcuts() {
    var focusable = document.getElementsByTagName('input');
    focusable = focusable.concat(document.getElementsByTagName('select'));
    focusable = focusable.concat(document.getElementsByTagName('textarea'));
    YAHOO.util.Event.addListener(focusable, 'focus', disableShortcuts);
    YAHOO.util.Event.addListener(focusable, 'blur', ensableShortcuts);
}