我希望在关注输入时打开一个对话框。它曾经完美地工作，但我必须升级 jQuery 和/或 jQueryUI，现在 FF 不会删除模式，IE 甚至不会关闭对话框。请参阅http://jsbin.com/EdupOgE/2/举个例子。如我的示例所示，使用单击确实可以正常工作，但不能使用焦点。为什么会发生这种情况以及如何解决它？谢谢
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready( function() {
$("#id_focus").focus(function(){$("#dialog").dialog("open");});
$("#id_click").click(function(){$("#dialog").dialog("open");});
$("#dialog").dialog({
autoOpen : false,
modal : true,
buttons : [{text : 'CANCEL',click : function() {$(this).dialog("close");}}]
});
});</script>
</head>
<body>
None: <input type="text" value="" />
Click: <input id="id_click" readonly="readonly" value="PORTLAND OR 97232" />
Focus: <input id="id_focus" readonly="readonly" value="PORTLAND OR 97232" />
<div id="dialog" title="Title"></div>
</body>
</html>
最佳答案
您只需将 $("#id_focus").blur(); 添加到焦点函数中，如下所示:
<强> Working Example
$(document).ready(function () {
$("#id_focus").focus(function () {
$("#id_focus").blur(); // Important bit
$("#dialog").dialog("open");
});
$("#id_click").click(function () {
$("#dialog").dialog("open");
});
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: [{
text: 'CANCEL',
click: function () {
$(this).dialog("close");
}
}]
});
});
Focus
Upon opening a dialog, focus is automatically moved to the first item that matches the following:
- The first element within the dialog with the autofocus attribute
- The first :tabbable element within the dialog's content
- The first :tabbable element within the dialog's buttonpane
- The dialog's close button
- The dialog itself
While open, the dialog widget ensures that tabbing cycles focus between elements within the dialog itself, not elements outside of it. Modal dialogs additionally prevent mouse users from clicking on elements outside of the dialog.
Upon closing a dialog, focus is automatically returned to the element that had focus when the dialog was opened.
强调最后一点是我的
因此，如果在对话框关闭后焦点返回到 #id_focus，它应该在关闭对话框后立即尝试重新打开对话框...我想这种循环功能不会带来任何好处这很可能是你遇到麻烦的原因......
关于javascript - 由焦点启动时对话框无法正确关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18577012/