0

私は 3 つの入力の 2 つのグループを持つ小さなフォームを持っています。

グループごとに 1 つの入力のみが表示されます。

入力が集中していない

入力にフォーカスすると、同じグループのすべてが表示されます。

Group1 入力重視

グループの入力がフォーカスされていない場合は、最初の入力のみが表示されます。

Group2 入力重視

$('input').focus(function () {
    $(this).closest('div').addClass('focused');
}).blur(function () {
    $(this).closest('div').removeClass('focused');
})

これは Chrome では機能しますが、Firefox では機能しません (私のフィドルを確認してください)。
両方の右側の入力は、フォーカスを取得する前に非表示になります。
イベントのバブリング順序が両方のブラウザで異なるようです。

誰かがこれをすべてのブラウザで機能させるのを手伝ってくれますか?

4

1 に答える 1

2

これを防ぐために、わずかな遅延を追加できます。

$('input').focus(function () {
    var $parent = $(this).closest('div');
    var timeoutId = $parent.data('tid');

    if (timeoutId) {
        // Aborting the blur
        clearTimeout(timeoutId);
    }

    $parent.addClass('focused');
}).blur(function () {
    var $parent = $(this).closest('div');

    var tid = setTimeout(function(){
        $parent.removeClass('focused');
    }, 1);

    $parent.data('tid', tid);
})

http://jsfiddle.net/b439u/5/

于 2013-08-06T14:01:13.270 に答える