1

我有以下测试 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>

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

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

4

4 回答 4

2

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

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

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

您可以在大约 4 年前提交给jQueryUI 错误 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>

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

于 2013-10-24T02:49:56.713 回答
1

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

于 2013-10-23T10:02:53.083 回答
0

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

<input type="password" name="password" autofocus="autofocus"/>
于 2013-10-23T10:03:38.120 回答
-1

使用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>
于 2013-10-23T10:02:56.237 回答