按tab键时如何选择tinyMCE文本区域？

Question

你好 我得到了类似于该代码

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

“textarea”是tinyMCE...当我尝试通过输入和textarea项目移动选择时出现问题。 加载页面时，它聚焦 input[name=text] 但当我按 Tab 键时，它选择 input[name=tags] 而不是 textarea[name=body] （这是下一个） 你能帮我解决这个问题吗？

Answer 1

这对于传统的选项卡索引来说是不可能的，因为 TinyMCE 实际上隐藏了 </code> 并创建了一个包含编辑器的 <code><iframe></code>。您可以通过在 javascript 中前一个元素的模糊事件中强制将焦点集中在编辑器上来解决此问题，这是我头顶上的 jQuery 片段：

$('#prev-input').blur(function(){
    tinyMCE.get('textarea').focus();
});

然后，一旦用户离开前一个输入焦点，就会跳转到 TinyMCE编辑器中，您也可以添加一个 Blur() 方法来到达下一个元素。

Answer 2

我通过向插件添加 'tabfocus' 来解决此问题，然后添加 tabfocus_elements : ":prev,:next"

http:// tinymce.moxiecode.com/wiki.php/Plugin:tabfocus

http://tinymce.moxiecode.com/wiki .php/tabfocus_elements

Answer 3

有一个插件解决了它

http:// /sourceforge.net/tracker/index.php?func=detail&aid=1657397&group_id=103281&atid=738747

我从 TinyMCE 论坛知道它

http://tinymce.moxiecode.com/forum/viewtopic.php?id=813

Answer 4

我需要来自页面上另一个元素的自定义选项卡顺序。我在 IE11 中用于解决此问题的代码是

var button = $('#btn-id');
button.on('keydown', function (e) {
    if ((e.which === 9 && !e.shiftKey)) {
        e.preventDefault();
        $(tinyMCE.get()[0].contentWindow).focus();
    }
});

请注意，上述代码仅在页面上只有一个编辑器时才有效。否则，您将必须循环遍历 tinyMCE.get() 返回的数组，以找到要设置焦点的正确编辑器。

Answer 5

我发现 focus 事件被触发，但在元素（容器）中聚焦并不总是有效。

就我而言，我从编辑器 1 - 4 进行 Tab 键切换，当我按 Shift+Tab 键时，我失去了对实例的关注。

为了解决这个问题，我将以下内容添加到tinyMCE的设置事件中

setup: function(editor) {
  editor.on("focus", function(e) {
    e.target.editorContainer.scrollIntoView();
  });
}