编辑：

Question

我在jQuery对话框中遇到TinyMCE文本编辑器的问题。每当文本编辑器的文本区域被聚焦并且我将其取消聚焦时，页面就会滚动到对话框的顶部。这显然只有在页面可滚动且页面当前未滚动到顶部时才会发生。始终使用Firefox，有时使用Chrome。

https://jsfiddle.net/dqrarcv3/

要测试它，请确保“结果”窗口可滚动而不是滚动到顶部。

重现的步骤：

关注文本编辑器的textarea
点击它外面

或者

关注文本编辑器的textarea
单击上下文菜单（例如文件）
将鼠标悬停在其他上下文菜单上（例如编辑）

简化的HTML：

<div id="dialog">
    <div style="height:100px">
        Lorem ipsum lorem ipsum Lorem ipsum
        lorem ipsum Lorem ipsum lorem ipsum
    </div>
    <textarea id="editor"></textarea>
</div>

简化的JavaScript：

$(document).ready(function () {
    $("#dialog").dialog({
        autoOpen: true,
        width: "auto",
        position: {
            my: "center top",
            at: "center top",
            of: window
        },
        modal: true
    });

    $("#editor").css("height", "250px");
    tinymce.init({
        selector: "#editor"
    });
});

似乎不聚焦使TinyMCE聚焦对话框的关闭按钮，然后使页面滚动到它。如果对话框没有任何按钮而是一些输入元素，则它会聚焦于第一个按钮。

我已经在TinyMCE代码中找到了发生这种情况的地方，但是评论该功能并没有解决问题。

d.on("focusout", function() {
    console.log("FOCUSOUT");
    window.setTimeout(function() {
        var t = e.focusedEditor;
        u(s()) || t != d || (d.fire("blur", {
            focusedEditor: null
        }), e.focusedEditor = null, d.selection && (d.selection.lastFocusBookmark = null))
    }, 0)
})

任何想法如何解决这种奇怪的行为或实际导致它的原因？

编辑：

仍有同样的问题。这是问题的GIF：http://gfycat.com/SneakyImpartialAmazontreeboa

如图所示，当TinyMCE编辑器失去焦点时（通过单击其他位置或切换上下文菜单），对话框中的第一个可聚焦元素将被聚焦。我在TinyMCE的源代码中添加了“FOCUSOUT”控制台消息，但我仍然找不到导致它的原因。

上面的gif中使用的确切代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="/js/jquery-ui/css/redmond/jquery-ui-1.10.4.custom.css">
<script src="/js/jquery-1.10.2.js"></script>
<script src="/js/jquery-ui/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/js/tinymce/tinymce.min.js"></script>
</head>
<body>

<div id="dialog">
    <p>Lorem ipsum!</p>
    <button>BUTTON</button>
    <p>...text...</p>
    <p>...text...</p>
    <p>...text...</p>
    <p>...text...</p>
    <textarea id="editor" rows="5"></textarea>
</div>

<script>
$(document).ready(function()
{
    $("#dialog").dialog(
    {
        autoOpen: true,
        modal: true,
        width: window.innerWidth / 1.75,
        position: { my: "center top", at: "center top", of: window },
    });
    tinyMCE.init(
    {
        selector: "#editor"
    });

    $(".ui-dialog-titlebar").hide(); // Hide dialog titlebar
    $(".ui-dialog").css("border", "1px solid black"); // Add border
});
</script>

</body>
</html>

Answer 1

尝试评论模态：true

$("#dialog").dialog({
    autoOpen: true,
    width: "auto",
    position: {
        my: "center top",
        at: "center top",
        of: window
    },
    //modal: true
});

promise.all

解决了FF中的问题

Answer 2

UI希望专注于对话框中的任何内容当微小的焦点丢失时，它会聚焦在对话框中的第一个对象上，浏览器会自动滚动到它。

因此您需要在UI对话框中禁用自动对焦。

$.ui.dialog.prototype._focusTabbable = $.noop;

jQuery对话框中的TinyMCE编辑器在取消聚焦编辑器时自动滚动顶部

编辑：

2 个答案: