有没有办法防止TinyMCE在页面加载时自动聚焦？

Question

有没有办法防止TinyMCE在页面加载时自动聚焦？

11

我在表单中有多个输入字段，其中一个使用了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本身即使你尝试将焦点设置到其他输入框，它仍然会将焦点设置到编辑器上。

当您在文本区域中加载一个值后，所有这些都会改变。这时IE9的工作方式就像其他浏览器一样。目前，我在文本区域中加载了一个空格，并且这使得IE9可以正确地工作。

- Brian Surowiec

2

你正在使用旧版本的TinyMCE吗？ - MrCode

2个回答

-1

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

如果您在函数内执行单个命令，则会忽略preventDefault并保持聚焦和滚动！！！ :D

- Navid Kianfar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zuul · Accepted Answer

如果能提供您的其余输入和表单结构，将有助于了解更好的方法，但以下内容应该有所帮助：

jQUERY

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

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

来自文档：

此选项使您能够指定在所有编辑器实例完成初始化时要执行的函数。这与HTML页面的onload事件非常相似。

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

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

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

看这个工作示例！

已编辑

我花了很长时间来测试并使其在IE9上运行，但现在它终于完成了：

请查看工作解决方案！

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，表示加载完成。在找到它后，将焦点设置为第一个输入元素，并清除超时计时器。