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

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内容，因此无法自动找到您的密码控件。 另一方面，我猜你也无法访问来自父母的对话内容（跨域可能是？）。

我认为你的问题应该是，如何不关注对话框的第一个元素

我发现了这个问题的临时修复，但它并不完美。

你可以在大约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有一个解决方案：在你想要集中注意力的文本框中使用autofocus标签。 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 个解决方案

解决方案1
2 已采纳 2013-10-24 02:49:56

解决方案2
1 2013-10-23 10:02:53

解决方案3
0 2013-10-23 10:03:38

解决方案4
-1 2013-10-23 10:02:56

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

问题描述

4 个解决方案

解决方案1 2 已采纳 2013-10-24 02:49:56

解决方案2 1 2013-10-23 10:02:53

解决方案3 0 2013-10-23 10:03:38

解决方案4 -1 2013-10-23 10:02:56

解决方案1
2 已采纳 2013-10-24 02:49:56

解决方案2
1 2013-10-23 10:02:53

解决方案3
0 2013-10-23 10:03:38

解决方案4
-1 2013-10-23 10:02:56