对话框没有'当焦点启动时，无法正确关闭

Dialog doesn't properly close when initiated by focus

本文关键字：启动 焦点 对话框      更新时间：2023-09-26

我希望在关注输入时打开一个对话框。它过去工作得很好，但我一定升级了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();添加到焦点函数中，如下所示：

工作示例

$(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");
            }
        }]
    });
});

来自API文档：

焦点

打开对话框后，焦点自动移动到第一个项目匹配以下内容：

  1. 对话框中具有自动对焦属性的第一个元素
  2. 第一个：对话框内容中的选项卡元素
  3. 第一个：对话框按钮窗格中的选项卡式元素
  4. 对话框的关闭按钮
  5. 对话框本身

打开时，对话框小部件确保选项卡循环聚焦在对话框本身的元素之间，而不是在对话框外部的元素之间。模式对话框还防止鼠标用户点击对话框之外的元素。

关闭对话框后，焦点会自动返回到元素打开对话框时具有焦点的

对最后一位的强调是我的

因此，如果对话框关闭后焦点返回到#id_focus，它应该在对话框关闭后立即尝试重新打开。。。我想这个循环功能不会带来任何好处，它很可能是你麻烦的原因。。。

$(document).ready(function () {
    $("#id_focus").onfocus(function () {   
        $("#id_focus").blur();    
        $("#dialog").dialog("open");
    });
});
相关文章：