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 ments.

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.

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 ments.

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.

• javascript
• jquery
• events
• jquery-events

Share Improve this question Follow edited Jun 25, 2022 at 19:56 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jan 4, 2011 at 1:12 treefacetreeface 13.4k44 gold badges5252 silver badges5757 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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 ments.

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 1x1), 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.