StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to capture keybd events at document level, but let editable fields have their events?
text
Body
copied!<p><strong>EDIT:</strong> 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 <strong><em>is</em></strong> going to be handled by the element on the browser page that has focus or whether it's <strong><em>not</em></strong> 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). </p> <p>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.</p> <p>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.</p> <p>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.</p> <p>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:</p> <pre><code>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); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload