如何聚焦对话框中的第一个输入框

How to focus on first input box in dialog box

本文关键字：第一个 输入 对话框 何聚焦 聚焦      更新时间：2023-09-26

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

对话框测试.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>

和对话框内容.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也不起作用，因为对话框在打开页面之前等待页面将控件返回给父级

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

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

但是，正如我之前提到的，这段代码并不完美。应针对每个页面调整延迟，同样，它不会一直有效。

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

您需要

将autofocus属性添加到文本框中。

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

使用 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>
相关文章：