Search code examples
tinymcetabindex

How to select tinyMCE textarea when pressing tab key?


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 ?


Solution

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