2

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

2 回答 2

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

});

从API 文档：

重点

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

  1. 对话框中具有 autofocus 属性的第一个元素
  2. 对话框内容中的第一个 :tabbable 元素
  3. 对话框按钮窗格中的第一个 :tabbable 元素
  4. 对话框的关闭按钮
  5. 对话框本身

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

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

强调最后一点是我的

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

于 2013-09-04T21:10:17.087 回答
0 
$(document).ready(function () {

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

});
于 2013-09-09T06:44:06.723 回答