2

キーボードのキーで切り替えることができるオーバーレイを作成しようとしています。ただし、フェードアウトを使用してメニューを非表示にすると、ウィンドウをクリックするまで、ドキュメントはキーダウン イベントを受け取りません。フェードアウトが終了した直後にドキュメントがリッスンするようにドキュメントにフォーカスを与えるにはどうすればよいですか?

<div id="overlay" class="overlay">
    <input type="text" value="test"/>    
</div>

$('#overlay').on('keydown', function() {
    $('#overlay').fadeOut(1000);
    return false;
});

$(document).on('keydown', function() {
   $('#overlay').fadeIn(1000);
    return false;
});

.overlay {
    position: fixed;
    background: black;
    color: white;
    width: 50%;
    height: 100px;
}

jsFiddleも参照してください

入力フィールドにカーソルを置き、1 つのキーを押します。1 秒でフェードアウトするはずです。その後、マウスでクリックするまで、ドキュメントはキーダウンを受け取りません。1 つのキーボード キーだけでモードを切り替えることができるように、ドキュメントにフォーカスを与えるにはどうすればよいですか?

編集：さまざまなブラウザでフィドルをテストしました。この問題はクロムに固有のようです。

4

1 に答える 1

2

オーバーレイをフェードアウトした後、テキスト フィールドからフォーカスを外す

働くフィドル

$(document).ready(function () {
    $('#overlay').on('keyup', function () {
        $('#overlay').fadeOut(1000);
        $("input[type='text']").blur();
        return false;
    });

    $('body').on('keyup', function () {
        $('#overlay').fadeIn(1000);
        return false;
    });
});
于 2013-04-12T17:58:52.027 に答える