Question

我有以下测试html文件，我从中剥离了不必要的标签

dialogTest.htm

<!DOCTYPE>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../theme/blitzer.css" />
    <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.10.3.custom.min.js"></script>
    <script type="text/javascript">
        $(function () {

            $("#dlg").dialog({
                autoOpen: false,
                resizable: false,
                modal: true
            });

            $('#button1').click(function () {
                ChangePassword();
            });

        });

        var loadedByFunction = false;

        function ChangePassword() {
            loadedByFunction = true;
            $("#dlg").dialog('option', {
                width: 380,
                height: 300,
                title: 'Change Password',
                close: function (event, ui) {}
            });
            $('#dlg').children().attr('src', 'dialogContent.htm')
            .load(function () {
                if (loadedByFunction) {
                    loadedByFunction = false;
                    $("#dlg").dialog('open');
                }
            });
            return false;
        }
    </script>
</head>
<body>
    <div style="display: none">
        <div id="dlg">
            <iframe src="" ></iframe>
        </div>
    </div>
    <button type="button" name="button1" id="button1" >Change Password</button>
</body>
</html>

dialogContent.htm

<!DOCTYPE>
<html>
<head>
    <script type="text/javascript">
        $(function () {
            $("input[name='password']").focus();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table cellpadding="1" cellspacing="0" border="0">
            <tr>
                <td>Password</td>
                <td><input type="password" name="password" /></td>
            </tr>
            <tr>
                <td>New Password</td>
                <td><input type="password" name="password1" /></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><input type="password" name="password2" /></td>
            </tr>
        </table>
    </div>
    <br />
    <div align="right">
        <input type="submit" name="btnOK" value="Ok" />
        <input type="reset" name="btnCancel" value="Cancel" onclick="Close()" />
    </div>
    </form>
</body>
</html>

我正在尝试关注对话框中的第一个输入，这是没有发生的。实际的焦点元素是关闭按钮（您可以通过按Enter来验证这一点，这会关闭对话框）

请注意，对话框的内容位于iframe内。我不能通过直接将html插入div标签来组合对话框的内容。这两个页面都是活动的aspx页面，无法简单组合。实际对话框内容比几个输入框更复杂，可以是datebox，dropdown，textarea，multiselect，...的组合......

请注意，setTimeout无效，因为对话框在打开之前等待页面将控制权返回给父级

问题如何将焦点移动到对话框中的第一个组件（在本例中为密码输入）

Answer 1

我过去也有同样的问题，jQuery将焦点移动到对话框中的第一个控件，在你的情况下，它会变成对话框顶部的关闭按钮。由于jQueryUI无法访问IFRAME的内容，因此无法自动找到您的密码控件。另一方面，我猜你也无法访问来自父母的对话内容（跨域可能是？）。

我认为你的问题应该是NOT to focus on first element of the dialog box

我找到了这个问题的临时解决方案，但它并不完美。

您可以在约4年前提交给jQueryUI bug 4731的票证中阅读此内容。

评论建议在主文件（dialogTest.htm）

中使用以下代码

<script type="text/javascript">
    $(function(){
        $.ui.dialog.prototype._focusTabbable = function(){}; 
    }
</script>

此代码将解除jQueryUI对话框的焦点移动，您可以像以前一样使用焦点脚本，但您也需要延迟。

<script type="text/javascript">
    $(function () {
        setTimeout(moveFocus, 500);
    });

    function moveFocus(){
        $("input[name='password']").focus();
    }
</script>

然而正如我之前提到的，这段代码并不完美。应该为每个页面调整延迟，并且再次，它将不会一直工作。

Answer 2

html5有一个解决方案：使用要聚焦的文本框中的自动聚焦标记。 http://diveintohtml5.info/forms.html有更多相关信息。如果您不确定目标浏览器是否支持自动对焦，则可以在同一页面上使用回退。

Answer 3

您需要在文本框中添加autofocus属性。

<input type="password" name="password" autofocus="autofocus"/>

Answer 4

使用jQuery，您可以按如下方式执行：

<script type="text/javascript">
window.onload = function() {
    $("input[name='password']").focus();
};
</script>

或

<script type="text/javascript">
$(document).ready(function() {
    $("input[name='password']").focus();
});
</script>

如何关注对话框中的第一个输入框

4 个答案: