jQuery keypress/keyup/etc Ereignisse, die nicht entlassen werden, wenn die select-box wird erweitert

Check out my-code-Beispiel hier: http://pastebin.com/D1ZctG11

Die Kernaussage ist: Wenn du ein select-Feld erweitert (entweder über die Tastatur oder die Maus), jquery wichtigsten Veranstaltungen, die nicht scheinen, um das Feuer - zumindest nicht in der Mac-Chrome.

Gibt es irgendwelche workarounds?

Mein end-Ziel ist es, zu wählen, was der Benutzer eingegeben hat, während die select-box wird erweitert, wenn mit der optgroup element.

edit:

jsfiddle link: http://jsfiddle.net/XacfX/

Dank

Mustafa

  • Einige Dinge, um zu versuchen, kommen sofort in den Sinn: ist das Ereignis, sprudeln? Können wickeln Sie die select-in ein div und erfassen Sie dort? Sind Sie mit keydown, keyup und keypress? Versuchen Sie, alle drei? Besser noch, warum nicht einfach verwenden Sie ein Kombinationsfeld und ersetzen Sie die select -; Sie sparen sich einige Mühe 😉
  • In Zeile 11 haben Sie $(this).attr("id"); aber 'dies' wäre 'e'. Auch könnte man erwägen, mit Konsole.Protokoll zur Ankündigung der Veranstaltung gefeuert wird in deinem debugger.
  • da Sie Ihren code gepostet, es wäre besser gewesen, wenn es post auf jsfiddle.net damit wir es testen kann
  • Wenn jemand zeigen könnte, die absolut einfachste Lösung für dieses problem, ich würde gerne, um Ihnen ein Kopfgeld von 50 Ruf Punkte. Durch einfachste ich meine, die wenigsten von code, der das problem löst (während noch die Erhaltung der Gruppierung).
  • Ich bin mir ziemlich sicher, dass die "besten" Abhilfe, die funktioniert in allen Browsern wäre die Ersetzung der select-Boxen w/ optgroups mit einer javascript-Implementierung, die verwendet divs und Listen, oder etwas entlang jenen Linien.
InformationsquelleAutor Mustafakidd | 2011-12-27
  1. 4

    Ich glaube, Sie haben zu verwenden die jQuery ändern():

    http://jsfiddle.net/vvBqE/11/

    Wenn ich Sie falsch verstanden, Sie können sehen, welche option der Benutzer gewählt hat, auf diese Weise. Sie können auch die wichtigsten Ereignisse in meinem Beispiel, aber die callback-Funktion wird nicht ausgelöst, wenn der Benutzer wählt eine option aus, indem Sie mit der Maus nur.

    • Ich bin damit einverstanden. Über wichtige Ereignisse, die scheinbar nicht direkt auf ein select-element.
    • Auch habe ich oft den Wert, den der Benutzer ausgewählt hat, mit $('select option:selected').val();
    • Nicht sicher, wie Sie mit change() würde mein problem lösen - änderung ist nur gefeuert, nachdem Sie eine neue option in der Liste. Die Frage, die ich gepostet wird, ist zu Fragen, wie kann man eine select-Liste mit optgroups wählen Sie die option, die passt, was Sie eingegeben haben, auf Ihrer Tastatur die wenn Sie die select-box wird erweitert. Dies funktioniert gut, wenn die select-box ist kompakt, aber nicht erweitert Chrome - Browser zu unterscheiden scheint, in dem Umgang mit diesem Verhalten.
    • Endlich habe ich verstanden, was Sie zu tun versuchen. Seltsam, es ist zum Teil arbeiten, die in Chrome auf Windows 7. Ich kann wählen Sie Optionen mit der dropdown-Liste geschlossen und geöffnet. Doch von einem usability-Sicht, es macht nicht viel Sinn für mich, um in der Lage sein, etwas zu geben, ich weiß nicht, ob es existiert oder nicht. Dann wieder, ich weiß nicht, die volle Anwendung.
    InformationsquelleAutor Bay
  2. 3

    Als dies in der Tat scheint verbuggt möchten Sie vielleicht versuchen, so etwas wie einen workaround:

    http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/

    Machen würde die select-box als Stil-Liste am Ende. Einige Optimierungen zu ermöglichen optgroups mit dieser Lösung und voilá, du hast ein dropdown-Feld angezeigt wird inline mit der Seite ist und daher nicht als block-Schlüssel-Ereignisse.

    Auf der anderen Seite erhalten Sie auch zum Stil der dropdown-ganz wie Sie wollen 🙂

    • Ich denke, dies ist wahrscheinlich die beste Antwort, aber merkwürdig ist, dass wir zu dem Mittel greifen müssen, um diese Art von Sachen.
    • Der link funktioniert nicht mehr. Es leitet auf einigen anderen Seite.
    InformationsquelleAutor bardiir
  3. 2

    Buggy in der Tat, ich kann nicht finden, eine Erklärung irgendwo, aber es scheint im Zusammenhang mit der Tatsache, dass der browser rendert die dropdown popup auch außerhalb des browser-Fensters (versuchen Sie, Ihren browser wirklich klein und öffnen Sie Ihre dropdown, verlässt es die Grenzen), so dass es sich nicht um ein typisches Dokument-element.

    Man kann dies umgehen, fügen Sie eine Größe auf den dropdown -

    <select name="sel_id" id="sel_id" size=5>
  <option value="0">Choose a new fixer...</option>
    <optgroup label="Group A">
    <option value="6366">Test User useruser</option>
  </optgroup>
  <optgroup label="Group B">
    <option value="5831">First Guy</option>
    <option value="1123">Second Guy</option>
    <option value="7232">Second Second Guy</option>
  </optgroup>
</select>

$(document).keypress(function(e){
    console.log(String.fromCharCode(e.keyCode));
});

    Ich bin sicher, dass einige DOM-Experten rund um etwas Licht auf diese ein.

    • Nur wenn Sie Größe > 1 die wichtigsten Ereignisse ausgelöst, sondern es hat auch den Effekt nicht mehr Rendern als drop-down-und stattdessen rendert als eine Art Listenfeld. Danke für die Idee, aber... sehr seltsam.
    InformationsquelleAutor Francisco Aquino
Schreibe einen Kommentar