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.

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.

• javascript
• jquery
• tinymce

Share Improve this question Follow edited Jun 9, 2012 at 4:29 Brian Surowiec asked Jun 8, 2012 at 7:07 Brian SurowiecBrian Surowiec 17.3k88 gold badges4444 silver badges6464 bronze badges 1

• 2 Are you using an old version of TinyMCE? – MrCode Commented Jun 8, 2012 at 7:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

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.

setup: function(ed){
   ed.on('postRender', function (editor, cm) { editor.preventDefault(); }); 
}

if you execute a single mand inside the function it ignores the preventDefault and keeps focusing and scrolling!!!! :D