jquery 对话框的初始焦点答案

【问题标题】：Initial focus for jquery dialog boxjquery 对话框的初始焦点
【发布时间】：2020-07-02 15:11:58
【问题描述】：

我正在从 HTML 页面中的链接打开一个 jquery 对话框。当对话框的内容长于框的指定高度时，初始焦点在对话框的底部。（指定的高度是不可改变的——这用于许多不同的地方。）首次打开对话框时如何让焦点位于对话框顶部？

HTML头部的JQuery对话框代码：

<script>
    $(function () {

        $("#dialog-detail").dialog({
            autoOpen: false,
            height: 500,
            width: 700,
            modal: true,
            buttons: {
            }
        });

        $("#create-detail")
            .click(function () {
                $("#dialog-detail").dialog("open");
                $("#dialog-detail").focus("div");
            });
    });
</script>

对话框 HTML 代码的截断版本：

<div id="dialog-detail" title="Balance Entry Report Detail">
    <div id='extPageContainer'>
        <header>
            <h3>Account information</h3>
        </header>
        <footer>
            <input type='submit'  value="Close window" onclick="window.close();"  />
        </footer>
    </div>
</div>

打开对话框的链接在一个列出交易信息的表格中——对话框是表格中某个条目的详细信息：

<a id="create-detail" style="cursor: pointer;">231435353</a>

【问题讨论】：

$("#dialog-detail").focus("div") 没有意义。当您使用参数调用.focus() 时，您正在绑定一个事件处理程序，因此参数必须是一个函数。

标签： jquery modal-dialog jquery-ui-dialog

【解决方案1】：

您没有正确调用.focus()。当使用参数调用时，参数应该是一个处理函数，当指定元素获得焦点时调用该处理函数。作为参数的字符串无效。

如果您想将焦点设置到特定元素，您应该调用.focus()，该元素不带任何参数。如果你想把焦点放在<header> 元素上，你可以这样做：

    $("#create-detail")
        .click(function () {
            $("#dialog-detail").dialog("open");
            $("#dialog-detail header").focus();
        });

【讨论】：