jquery对话框的初始焦点

时间:2017-05-08 19:59:04

标签: jquery modal-dialog jquery-ui-dialog

我正在从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>

1 个答案:

答案 0 :(得分:0)

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

如果要将焦点设置为特定元素,则应该在元素上没有参数的情况下调用.focus()。如果您希望焦点位于<header>元素上,您可以执行以下操作:

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