Question

EDIT: Since nobody has responded, I’ll try to restate my question more succinctly. When handling keystrokes on a browser page (like left/right/space) how does one tell whether the keystroke is going to be handled by the element on the browser page that has focus or whether it’s not going to be handled by that object and it would be OK to handle it globally? Ideally, you’d let the focus object see the keystroke and be able to tell whether it handled it or not. If not, you could then process it yourself. If it handled it, you would do nothing with it (assuming that the focus object has a more important use for the keystroke).

Here’s a typical example in a non-browser setting. Imagine you have a Windows dialog that has a bunch of typical dialog box controls, a couple buttons and a rich edit control in it. If you’re in a typical dialog box control, the Enter key on the keyboard will activate the OK button on the dialog and accept the dialog’s changes. If you’re in the rich edit control, the Enter key will enter a new line. The dialog box is somehow able to tell whether the current control in the dialog box wants to process the enter key or whether it should be handled globally.

In my particular browser case, I’m using YUI2 event handling to capture keystrokes at the document level so that I can allow the user to use the left/right arrows on the keyboard to move through a slideshow on the page without having to explicitly set the focus to any particular element on the page (a feature my users like). But, if the page contains any editable fields, I want those left/right arrows to be processed by that field on the page and not by my slideshow. I’m looking for an elegant way to do that.

I realize I can look at the original event target and “try” to figure out if that target is capable of handling the left/right arrows (input, textarea, contenteditable, etc…), but I was hoping for a more foolproof method. Is there any way to handle a keystroke at the document level ONLY when it isn’t otherwise handled by an object on the web page. In my YUI keyboard handler now, I’m getting all keyboard events, even ones that will actually be handled by the target object.

Here’s what my code looks like now and I’m looking for a more elegant way to do this that doesn’t require the ObjectWantsKeys function which is somewhat brittle:

JF.Slideshow.prototype._HookupKeyNav = function () {
    var k = YAHOO.util.KeyListener;
    var key = k.KEY;
    // see if keyboard handling is enabled or not
    if (((this._config.keyboardNav == "auto") && (JF.SlideshowCnt <= 1)) || (this._config.keyboardNav == "on")) {
        this._keyListener = new YAHOO.util.KeyListener(
        document, {
            ctrl: false,
            shift: false,
            alt: false,
            keys: [key.LEFT, key.RIGHT, key.SPACE]
        }, {
            fn: this._HandleKeys,
            scope: this,
            correctScope: true
        });
        this._keyListener.enable();
    }
}
JF.Slideshow.prototype._HandleKeys = function (type, args, obj) {
    var keyCode = args[0];
    var event = args[1];
    var target = event.srcElement || event.target;
    if (JFL.ObjectWantsKeys(target)) return; // if the current focus object wants keystrokes, then we shouldn't process them
    var key = YAHOO.util.KeyListener.KEY;
    switch (keyCode) {
    case key.LEFT:
        this.Back();
        break;
    case key.RIGHT:
        this.Forward();
        break;
    case key.SPACE:
        this.StartStopToggle();
        break;
    default:
        break;
    }
}
JFL.ObjectWantsKeys = function (o) {
    // list of HTML object types that want the keystroke if they have focus
    var list = {
        "input": true,
        "textarea": true
    };
    try {
        // unfortunately o.contentEditable set to an empty string means it is editable so we need this more complicated comparision
        if ((typeof o.contentEditable !== "undefined") && (o.contentEditable === "true" || o.contentEditable === true || o.contentEditable === "")) {
            return (true); // focus object is editable
        }
        if (o.tagName && list[o.tagName.toLowerCase()]) {
            return (list[o.tagName.toLowerCase()]); // focus object can take keys
        }
    } catch (e) {}
    return (false);
}

Answer 1

I solved this by checking the type of element that had focus:

var tag = document.activeElement.tagName;
if (tag == "INPUT" || tag == "TEXTAREA")
  return;

This wasn’t perfect because I also didn’t want the KeyListener to handle keystrokes when a YAHOO.widget.Dialog was displayed (which would give a tag name of “BODY”). I had to throw something together using a YAHOO.widget.OverlayManager and check the active dialog. If it’s null I process the keystroke.

It’s not elegant and I’m hoping for a better solution. I posted a message at the YUI forums:

http://yuilibrary.com/forum/viewtopic.php?p=26413

If I get an answer there it may help you as well.