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

Question

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

use*_*531 2 javascript jquery jquery-ui jquery-ui-dialog

我希望在重点关注输入时打开一个对话框.它曾经完美地工作,但我必须升级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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

apa*_*aul 5

您可以$("#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");
            }
        }]
    });

});

Run Code Online (Sandbox Code Playgroud)

从API文档:

焦点

打开对话框后,焦点会自动移动到与以下内容匹配的第一个项目:

具有autofocus属性的对话框中的第一个元素

第一个:对话框内容中的tabbable元素

第一个:对话框按钮窗格中的tabbable元素

对话框的关闭按钮

对话框本身

打开时,对话框小部件确保标签循环集中在对话框本身的元素之间,而不是对话框之外的元素.模态对话框还可以防止鼠标用户单击对话框外的元素.

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

^{强调最后一点是我的}

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

归档时间：	12 年，2 月前
查看次数：	265 次
最近记录：	12 年，1 月前