通过焦点启动对话框时，对话框无法正确关闭

Question

我希望在关注输入时打开一个对话框。 它曾经可以正常工作，但是我必须升级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>

Answer 1

您可以只添加$("#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. 对话框内容中的第一个：tabbable元素
3. 对话框按钮窗格中的第一个：tabbable元素
4. 对话框的关闭按钮
5. 对话框本身

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

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

^{最后一点是我的}

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

Answer 2

$(document).ready(function () {

    $("#id_focus").onfocus(function () {   
        $("#id_focus").blur();    
        $("#dialog").dialog("open");
    });

});