Question

我有一个使用AJAX获取的登录表单，我希望在jQuery UI对话框中显示，并希望第一个输入字段具有自动聚焦。我已经使用下面的代码工作，但我发现它是一个非常黑客，并认为应该有一个更好的解决方案。此外，这个行为在Chrome 23，IE9和Firefox 16上似乎都是一致的，所以我想借此机会对这些内容有更深入的了解，并希望有人愿意解决这些问题。

我在SO和其他地方发现了许多相关的问题，但是所提出的答案似乎都不适用于我。奇怪的是，许多问题都出现在相反的问题上;即删除自动对焦......

使用jQuery Hotkey插件，键Alt+l触发表单提取等。第一个输入元素具有id“user”。代码是

$(document).bind('keydown', 'Alt+l', function () {
    $('<div>', {
        title: 'Log in'
    }).load('?action=login').dialog({
        modal: true,
        show: 'fade',
        hide: 'fade',
        resizable: false,
        draggable: false,
        open: function (e) {
            // Hack alert!
            setTimeout(function () {
                $('input:first', e.target).focus();
            }, 100);
        }
    });
    //$('#user').focus(); <- won't work; $('#user').length == 0
});

我不明白的是为什么我必须将focus()调用置于超时之内才能使用。如果超时不推迟选择，则选择$('input:first', e.target)（或等效的注释，$('#user')）为空。

如果有人能够解释这种行为，或者可能提供更好的解决方案，那将非常感激！

更新

获取的HTML只是常规表单

<form action="?action=login" method="post">
    <table>
        <tr><td><label for="user">Username:</label>
            <td><input id="user" type="text" name="user">
        <tr><td><label for="pass">Password:</label>
            <td><input id="pass" type="password" name="pass">
        <tr><td><td><input type="submit" value="Log in">
    </table>
</form>

请注意，对于GET和POST请求，URL ?action=login上的响应是不同的

Answer 1

我认为问题在于我创建的对话太过分了;在load完成之前。因此，将回调内的对话框代码移动到load可以顺利运行：

$(document).bind('keydown', 'Alt+l', function () {
    $('<div>', {
        title: 'Log in'
    }).load('?action=login', function () {
        $(this).dialog({
            modal: true,
            show: 'fade',
            hide: 'fade',
            resizable: false,
            draggable: false,
            open: function () {
                $('input:first', this).focus();
            }
        });
    });
});

我认为load是同步的，因此选择$('input:first', this)的位置无关紧要，但似乎并非如此。

也可能需要的只是将选择放在单独的事件中，以便在完成事件处理load之后DOM正确更新。在这种情况下，这两种解决方案基本上是等效的，除了前者是丑陋的黑客，后者不是这样。

如果这些都是废话，请不要犹豫，纠正我。

将焦点放在jQueryUI对话框中的第一个表单元素上

1 个答案: