Google Chrome: Fokus Problem mit der Bildlaufleiste

Question

Ich benutze jQuery 1.3.2.

Es gibt ein Eingabefeld in einem Formular. Durch Klicken auf das Eingabefeld öffnet sich ein Div als Dropdown. Das div enthält eine Liste von Elementen. Da die Listengröße groß ist, gibt es im div eine vertikale Bildlaufleiste.

Um das Dropdown-Menü zu schließen, wenn Sie auf den Bildschirm klicken, wird ein Blur-Ereignis im Eingabefeld angezeigt.

Das Problem ist jetzt:

In Chrom (2.0.172), wenn wir auf dem Scrollbar klicken, wird das Eingabefeld Fokus verliert. Und jetzt, wenn Sie außerhalb klicken, dann wird das Dropdown nicht geschlossen (da die Eingabe bereits den Fokus verloren hat, wenn Sie auf die srollbar geklickt haben)

In Firefox (3.5), IE (8), Oper (9.64), safari() wenn wir auf die Bildlaufleiste klicken, wird das Eingabefeld den Fokus nicht verlieren. Wenn Sie also nach dem Klicken auf die Rollleiste klicken, wird das Dropdown-Menü geschlossen. Dies ist das erwartete Verhalten.

So in Chrome einmal die Bildlaufleiste geklickt wird, und wenn ich dann außerhalb klicken wird das Dropdown nicht geschlossen. Wie kann ich dieses Problem mit Chrom beheben.

Answer 1

Früher habe ich auch solche Situation konfrontiert, und das ist, was ich gemacht habe.

$('html').click(function() { 
    hasFocus = 0; 
    hideResults(); 
}); 

und auf dem Eingabefeld wird kann ich das

$('input').click() 
{ 
    event.stopPropagation(); 

} 

So wird diese nach unten den Tropfen schließen, wenn irgendwo außerhalb des div geklickt (auch die Scrollbar). Aber ich dachte, wenn jemand eine logischere Lösung bieten könnte.

Answer 2

Könnten Sie vielleicht das Blur-Event auch auf das Drop-Down-Div setzen? Auf diese Weise, wenn entweder der Eingang oder die Drop-Down-Fokus verliert, wird es verschwinden ...

Answer 3

Ich bin neugierig ...
Sie die letzte Version von jedem Browser, warum nicht versuchst du es in Chrome 4.0.202?

Answer 4

Nun, ich hatte das gleiche Problem in meinem Dropdown-Steuerelement. Ich habe Chrome-Entwickler nach diesem Problem gefragt, sie haben gesagt, dass es a bug ist, das nicht in der nächsten Zukunft behoben werden wird, weil "es von vielen Leuten nicht gemeldet wurde und die Fehlerbehebung nicht trivial ist". Also, stellen wir uns der Wahrheit: Dieser Bug wird mindestens ein weiteres Jahr bestehen bleiben.

Für diesen speziellen Fall (Dropdown) gibt es jedoch einen Workaround. Der Trick ist: Wenn man auf eine Bildlaufleiste klickt, kommt das "mouse down" -Ereignis zum Besitzerelement dieser Bildlaufleiste. Wir können diese Tatsache benutzen, um eine Flagge zu setzen und sie im "onblur" -Handler zu überprüfen. Hier die Erklärung:

<input id="search_ctrl"> 
<div id="dropdown_wrap" style="overflow:auto;max-height:30px"> 
    <div id="dropdown_rows"> 
    <span>row 1</span> 
    <span>row 2</span> 
    <span>row 2</span> 
    </div> 
</div> 

"dropdown_wrap" div wird eine vertikale Bildlaufleiste bekommen, da der Inhalt nicht in fester Höhe passt. Sobald wir den Klick erhalten haben, sind wir ziemlich sicher, dass die Bildlaufleiste angeklickt wurde und der Fokus entfernt wird. Nun ein Code wie man damit umgeht:

search_ctrl.onfocus = function() { 
    search_has_focus = true 
} 

search_ctrl.onblur = function() { 
    search_has_focus = false 
    if (!keep_focus) { 
    // hide dropdown 
    } else { 
    keep_focus = false; 
    search_ctrl.focus(); 
    } 
} 

dropdow_wrap.onclick = function() { 
    if (isChrome()) { 
    keep_focus = search_has_focus; 
    } 
} 

Das ist es. Wir brauchen keine Hacks für FF, deshalb gibt es einen Browser-Check.In Chrome erkennen wir einen Klick auf die Bildlaufleiste, erlauben Bluring-Fokus, ohne die Liste zu schließen und stellen dann den Fokus wieder auf die Eingabesteuerung zurück. Natürlich, wenn wir eine Logik für "search_ctrl.onfocus" haben, sollte es auch modifiziert werden. Beachten Sie, dass wir überprüfen müssen, ob search_ctrl den Fokus hat, um Probleme mit Doppelklicks zu vermeiden.

Sie können vermuten, dass eine bessere Idee Onblur-Ereignis abbrechen könnte, aber dies wird in Chrome nicht funktionieren. Nicht sicher, ob dies ein Fehler oder eine Funktion ist.

P.S. "dropdown_wrap" sollte keine Paddings oder Ränder haben, sonst könnte der Benutzer in diese Bereiche klicken und wir behandeln dies als Scrollbar-Klick.

Answer 5

anstatt die Unschärfe zu erkennen, erkennen Sie den document.body oder das Fenster und klicken Sie auf den Mauszeiger. Bestimmen Sie, ob sich dieser Mauszeiger außerhalb der Menüleiste befindet. Presto, du hast erkannt, wenn sie außerhalb der Box geklickt haben!

Answer 6

Ich löste dies durch die folgenden Schritte ausführen:

#my_container ist der Behälter, der das "Überlauf: auto" hat CSS-Regel

$('#my_container') 
    .mouseenter(function(){ 
    // alert('ctr in!'); 
    mouse_in_container = true; 
    }) 

    .mouseleave(function(){ 
    // alert('ctr out!'); 
    mouse_in_container = false; 
    }); 

Und dann:

$('input').blur(function(){ 
    if(mouse_in_container) 
    return; 
    ... Normal code for blur event ... 
}); 

Als ich Wählen Sie ein Element in der Dropdown-Liste, ich schreibe den Code wie folgt um:

 (>> ADDED THIS) mouse_in_container=false; 
     $('input').attr('active', false); // to blur input 
     $('#my_container').hide(); 

Answer 7

Ich war mit der gleichen Situation/Problem konfrontiert und ich testete die Lösung von "ihsoft", aber es hat einige Probleme. Also habe ich an einer Alternative dafür gearbeitet und nur eine ähnliche wie "ihsoft" gemacht, aber eine, die funktioniert. Hier ist meine Lösung:

Ich hoffe, das wird jemandem helfen.

Answer 8

Ich konnte diese Antworten nicht zur Arbeit bekommen, vielleicht weil sie aus dem Jahr 2009 stammen. Ich habe mich nur damit beschäftigt, ich denke, ihsoft ist auf dem richtigen Weg, aber ein bisschen schwer.

Mit zwei Funktionen

onMouseDown() { 
    lastClickWasDropdown=true; 
} 
onBlur() { 
    if (lastClickWasDropdown) { 
     lastClickWasDropdown = false; 
     box.focus(); 
    } else { 
     box.close(); 
    } 
} 

Der Trick besteht darin, wie man die Elemente binden. Das Ereignis onMouseDown sollte sich im div "container" befinden, das alles enthält, auf das geklickt wird (dh das Textfeld, den Dropdown-Pfeil und die Dropdown-Box und die Bildlaufleiste). Das Blur-Ereignis (oder in jQuery das Fokusout-Ereignis) sollte direkt an das Textfeld gebunden sein.

Getestet und funktioniert!