如何专注于对话框中的第一个输入框答案

【问题标题】：How to focus on first input box in dialog box如何专注于对话框中的第一个输入框
【发布时间】：2013-11-01 13:03:38
【问题描述】：

我有以下测试 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 也不起作用，因为对话框在打开之前等待页面将控制权返回给父级

问题如何将焦点移动到对话框中的第一个组件（在这种情况下是密码输入）

【问题讨论】：

试试$("#dlg").contents().find('input:first()').focus()
正确的解决方法是为 html 中的第一个输入元素设置 autofocus 属性，例如 input type=".." ... autofocus />
您也可以查看关于此主题的另一个主题：stackoverflow.com/questions/277544/…
感谢您的所有 cmets，如果您在发布之前测试了该案例，那就太好了。 jQueryUI 打开后将焦点移至关闭按钮。我需要将其移回控件。 @MihaiFrentiu，我之前检查过这个问题，它不使用 iframe，所以不适用于这种情况

标签： javascript jquery jquery-ui

【解决方案1】：

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

【讨论】：

谢谢你的回答和cmets，你在我提供的案例上试过了吗？成功了吗？

【解决方案2】：

使用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>

【讨论】：

onload 是错误的，onready 是正确的。如果你能告诉我原因，我会给你 +1 :)
一旦页面的所有内容都已加载，窗口和/或正文元素上的加载事件（也称为“onload”）将触发。相比之下，jquery 的 $(document).ready(...) 函数将使用特定于浏览器的机制来确保在 HTML/XML dom 加载并可访问后尽快调用处理程序。
您希望焦点尽快发生。 onload 的触发时间可能比onready 晚得多，从而使焦点发生得太晚。实际上，即使onready 的连接速度很慢，或者页面非常大，也可能会为时已晚。也许最好的解决方案是在渲染后立即聚焦输入。 autofocus 正是这样做的——但还没有得到很好的支持。
我的赏金在哪里？？ :)
你的分析是正确的，但你的结论是错误的，对不起。

【解决方案3】：

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

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

【讨论】：

我在autofocus 上找不到任何实质性内容。哪些浏览器支持它？
浏览器支持位于：diveintohtml5.info/forms.html@nzall 下面提到
我认为 IE10+ 暂时无法实现。
谢谢你的回答和cmets，你在我提供的案例上试过了吗？成功了吗？

【解决方案4】：

过去我也遇到过同样的问题，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>

但是，正如我之前提到的，这段代码并不完美。延迟应该为每个页面调整一次，它不会一直起作用。

【讨论】：