焦点

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();添加到焦点功能中，如下所示：

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

});

来自the API Documentation：

焦点

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


具有自动对焦属性的对话框中的第一个元素

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

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

对话框的关闭按钮

对话框本身

打开时，对话框小部件确保标签循环重点关注   对话框本身内的元素之间，而不是它之外的元素。   模态对话框还可以防止鼠标用户单击   对话框外的元素。

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

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

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

Answer 2

$(document).ready(function () {

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

});

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

2 个答案:

焦点