Question

My specific use case is that I have a WYSIWYG editor which is basically an editable iframe. To the user, however, it looks like a standard-issue textarea. My problem is that I have inputs that sit before and after this editor in the (perceived) tab index and I’d like the user to be able to press tab (or the equivalent on his platform of choice) to get to the WYSIWYG editor when he’s in the previous element and shift-tab to get to it when he’s in the latter element.

I know this can be faked using the key events and checking whether or not the tab key was pressed, but I’m curious if there’s a better way.

---

UPDATE. treeface clarified the actual problem in the comments.

PROBLEM:

In normal case, you can use “TABINDEX” attribute of the <input> element to control that, when tabbing out of “Subject” input field (in an email form), the focus lands on “Body” input field in the e-mail. This is done simply by assigning correctly ordered values to “TABINDEX” attribute of both input fields.

The problem is that TABINDEX attribute only orders elements within the same frame. So, if “Body” input field is actually in an internal IFRAME, you can’t tab out of “Subject” in the parent frame straight into “Body” in the IFRAME using TABINDEX order.

Answer 1

You could probably emulate the desired behavior (probably with less issues than detecting TAB key) by onfocus/onblur events of the relevant input elements. This way you don’t CARE how the user got to the editor input, whether it’d be via TABs or clicking or some weird FireFox AddOn which allows you to jump to input element by its ID/name/# (I’m almost certain such add-on exists 🙂

---

UPDATE. OP clarified the problem in the comments.

PROBLEM:

In normal case, you can use “TABINDEX” attribute of the <input> element to control that, when tabbing out of “Subject” input field (in an email form), the focus lands on “Body” input field in the e-mail. This is done simply by assigning correctly ordered values to “TABINDEX” attribute of both input fields.

The problem is that TABINDEX attribute only orders elements within the same frame. So, if “Body” input field is actually in an internal IFRAME, you can’t tab out of “Subject” in the parent frame straight into “Body” in the IFRAME using TABINDEX order.

SOLUTION:

In the parent frame, create a new <INPUT> element. It will be invisible (e.g. via CSS or making size 1×1), will have name/id of “Body_clone”, and will have the TABINDEX attribute value which follows the TABINDEX of “Subject” field. It will also have an onFocus handler which will simply find the “Body” input element inside the IFRAME and call focus() on that element.

You can do the same with tabbing/shift-tabbing out of IFRAME “Body” element by creating “Subject_iframe_clone” and “After-body_iframe_clone” input elements in the IFRAME which work just like “Body_clone” did.