我在 jQuery 对话框中使用 TinyMCE 文本编辑器时遇到问题。每当文本编辑器的文本区域获得焦点并且我将其取消焦点时，页面就会滚动到对话框的顶部。显然，只有当页面可滚动并且页面当前未滚动到顶部时才会发生这种情况。总是在 Firefox 中出现，有时在 Chrome 中出现。
https://jsfiddle.net/dqrarcv3/
要对其进行测试，请确保结果窗口可滚动且未滚动到顶部。
重现步骤:
- 将焦点置于文本编辑器的文本区域
- 点击其外部
或者
- 将焦点置于文本编辑器的文本区域
- 点击上下文菜单(例如文件)
- 将鼠标悬停在另一个上下文菜单上(例如编辑)
简化的 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 编辑器失去焦点(通过单击其他位置或切换上下文菜单)时，对话框中的第一个可聚焦元素将获得焦点。我将“FOCUSOUT”控制台消息添加到 TinyMCE 的源代码中，但我仍然找不到导致它的原因。
上面 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>
最佳答案
尝试注释掉 modal: true
$("#dialog").dialog({
autoOpen: true,
width: "auto",
position: {
my: "center top",
at: "center top",
of: window
},
//modal: true
});
https://jsfiddle.net/dqrarcv3/6/
修复了 FF 中的问题
关于jquery - 当编辑器失去焦点时，jQuery 对话框中的 TinyMCE 编辑器会自动滚动到顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32736875/