How to select tinyMCE textarea when pressing tab key?

Question

Hello I got similar to that code

<form method="post" action="/" name="form" autocomplete="off">
<input type="text" name="title" />
<textarea name="body"></textarea>
<input type="text" name="tags" />
<input type="submit" name="submit" value="Send" />
</form>

Where the "textarea" is tinyMCE... problem comes when I try to move selection through input and textarea items. When the page is loaded it focus input[name=text] but when I press Tab key it select input[name=tags] instead textarea[name=body] (which is next) Can you assist me with that issue ?

Answer 1

This is impossible with conventional tab indexes as TinyMCE actually hides the <textarea> and creates an <iframe> with the editor in it. You could make a work around by forcing focus on the editor in the blur event of the previous element in javascript, here is ajQuery snipped of the top of my head:

$('#prev-input').blur(function(){
    tinyMCE.get('textarea').focus();
});

Then as soon as the user leaves the previous input focus would jump to the TinyMCE editor, you could possibly add a blur() method as well to got to the next element.

Answer 2

I resolved this with adding 'tabfocus' to plugins and then add tabfocus_elements : ":prev,:next"

http://tinymce.moxiecode.com/wiki.php/Plugin:tabfocus

http://tinymce.moxiecode.com/wiki.php/tabfocus_elements

Answer 3

There is a plugin solved it

http://sourceforge.net/tracker/index.php?func=detail&aid=1657397&group_id=103281&atid=738747

I known it from TinyMCE forum

http://tinymce.moxiecode.com/forum/viewtopic.php?id=813