Is there a way to prevent TinyMCE from auto focusing on page load?

Question

I've got a number of input fields on my form one of which is using TinyMCE (version 3.5.2). Once TinyMCE loads it sets focus to itself. How can I prevent this from happening? I would like to keep the first input selected by default.

This is what my code looks like right now

var tinymce = $('#Content');
tinymce.tinymce({
    theme: "advanced",
    plugins: "...",
    theme_advanced_buttons1: "...",
    theme_advanced_buttons2: "...",
    theme_advanced_buttons3: "...",
    theme_advanced_buttons4: "...",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_statusbar_location: "bottom",
    theme_advanced_resizing: true,
    content_css: [...],
    template_external_list_url: "lists/template_list.js",
    external_link_list_url: "lists/link_list.js",
    external_image_list_url: "lists/image_list.js",
    media_external_list_url: "lists/media_list.js",
    template_replace_values: {
        username: "Some User",
        staffid: "991234"
    }
});

Update:

After some more testing it looks like this issue is only in IE9. Chrome, FireFox, Opera & Safari do not set focus to the editor on page load. IE9 in IE7 and IE8 mode does not set focus on page load either but IE9 itself will set focus to the editor even when you try to set focus to another input.

This all changes once you load the page with a value in the textarea though. When you do that IE9 works like the other browsers. For now I'm loading the page with a single space in the textarea and that's making IE9 work correctly.

Zuul Zuul · Accepted Answer · 2012-06-08T17:41:10

Would help to have the remaining of your inputs and form structure to know the better approach, but something along this lines should help:

jQUERY

function myCustomOnInit() {
    $('form *:input[type!=hidden]:first').focus();
}

tinyMCE.init({
        ...
        oninit : myCustomOnInit
});

From the Documentation:

This option enables you to specify a function to be executed when all editor instances have finished their initialization. This is much like the onload event of an HTML page.

Note: You can also pass the function name as a string. But in this case, the function has to be declared in the global scope of the page.

The trick here is to set the focus for the first visible input:

$('form *:input[type!=hidden]:first').focus();

See this working example!

EDITED

Took me quite some time to test this and get it working for IE9, but here it is:

See this Working Solution!

jQuery

setup : function(ed) {
  ed.onLoadContent.add(function(ed, o) {
    var controlLoad = setTimeout(function() {
      if ($('.mceIframeContainer').size()==1) {
        $('form *:input[type!=hidden]:first').focus();
        clearTimeout(controlLoad);
      }
    }, 100);
  });
}

What this is doing is to run a timeout until the class .mceIframeContainer is found, meaning that the loading is done. After finding it, sets the focus for the first input element and the timeout is cleared.

Is there a way to prevent TinyMCE from auto focusing on page load?

2 Answers

EDITED