【问题标题】：Is there a way to prevent TinyMCE from auto focusing on page load?有没有办法防止 TinyMCE 自动关注页面加载？
【发布时间】：2012-06-08 07:07:24
【问题描述】：

我的表单上有许多输入字段，其中一个使用的是 TinyMCE（版本 3.5.2）。一旦 TinyMCE 加载，它就会将焦点设置为自身。我怎样才能防止这种情况发生？我想默认选择第一个输入。

这就是我的代码现在的样子

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"
    }
});

更新：

经过更多测试，这个问题似乎只存在于 IE9 中。 Chrome、FireFox、Opera 和 Safari 不会在页面加载时将焦点设置到编辑器。 IE7 和 IE8 模式下的 IE9 也不会在页面加载时设置焦点，但即使您尝试将焦点设置到另一个输入，IE9 本身也会将焦点设置到编辑器。

不过，一旦您在 textarea 中加载具有值的页面，这一切都会发生变化。当你这样做时，IE9 就像其他浏览器一样工作。现在我正在加载页面，在 textarea 中有一个空格，这使得 IE9 可以正常工作。

【问题讨论】：

您使用的是旧版本的 TinyMCE 吗？

标签： javascript jquery tinymce

【解决方案1】：

将有助于让您的其余输入和表单结构了解更好的方法，但类似的东西应该会有所帮助：

jQUERY

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

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

来自Documentation：

此选项使您可以指定在所有编辑器实例完成初始化时要执行的函数。这很像 HTML 页面的 onload 事件。

注意：您也可以将函数名作为字符串传递。但是在这种情况下，函数必须在页面的全局范围内声明。

这里的技巧是为第一个可见输入设置焦点：

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

查看这个working example！

已编辑

我花了一些时间来测试它并让它在 IE9 上运行，但它是这样的：

看到这个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);
  });
}

这样做是运行超时，直到找到类.mceIframeContainer，这意味着加载完成。找到后，为第一个输入元素设置焦点并清除超时。

【讨论】：

编辑为此解决方案添加了一个working example，即使没有来自tinyMCE 插件的oninit。
这适用，但不适用于 IE9。我用一些新发现更新了我的问题。
@BrianSurowiec，我花了相当长的时间来处理 IE9 问题，但只是编辑了答案，为您提供了一个有效且经过测试的解决方案！
不幸的是，这个解决方案并没有真正让 tinymce 不专注于页面加载。如果你有一个足够长的表单，你必须滚动，它会跳到tinymce编辑器，然后回到第一个输入，你可以看到它跳来跳去。如果有某种方法可以真正禁用它，使其不再专注于 tinymce 编辑器，那就太好了......

【解决方案2】：

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

如果你在函数中执行单个命令，它会忽略 preventDefault 并保持焦点和滚动！！！ :D

【讨论】：