2

AJAX で取得したログイン フォームがあり、それを jQuery UI ダイアログに表示し、最初の入力フィールドにオートフォーカスを設定します。以下のコードを使用して動作させましたが、かなりハックであることがわかり、より良い解決策が必要だと思います。また、動作は Chrome 23、IE9、および Firefox 16 で一貫しているように見えるので、この機会にこのことについてもう少し深く理解したいと思います。誰かが光を当ててくれることを願っています.

ここSOや他の場所で多くの関連する質問を見つけましたが、提案された回答はどれもうまくいかないようです。興味深いことに、質問の多くは反対の問題に関するものでした。つまり、オートフォーカスを削除します...

フォームのフェッチなどはAlt+l、jQuery Hotkey プラグインを使用してキーによってトリガーされます。最初の入力要素の 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>

URL に対する応答は、?action=loginGET 要求と POST 要求では異なることに注意してください。

4

1 に答える 1

2

問題は、ダイアログの作成が早すぎることだと思います。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)ましたが、そうではないようです。

また、イベント処理の conainingloadが完了した後に DOM が適切に更新されるようにするには、別のイベントに選択を入れるだけで十分だったかもしれません。その場合、2 つのソリューションは本質的に同等ですが、前者は醜いハックであり、後者はそうではありません。

これがナンセンスである場合は、遠慮なく訂正してください。

于 2012-12-01T15:01:20.623 に答える