Warum erfasst mein DIV keine Tastendruckereignisse, wenn er den Fokus hat?

8

Ich benutze jQuery 1.12. Ich möchte, dass ein DIV Tastenbetätigungen erfasst (speziell nach unten und oben), wenn es den Fokus hat. Also ich folgte diesem

%Vor%

aber dies erfasst nicht die Tastenbetätigungen. Sehen Sie meine Fiedel hier - Ссылка . Klicken Sie auf das Menü "Select State" oder klicken Sie auf das Feld "Last Name" und klicken Sie auf "Tab", um den Fokus auf das nächste DIV zu legen. Wenn dieses Menü jedoch den Fokus hat, wird durch Klicken auf einen beliebigen Schlüssel der obige Handler nicht aktiviert, zumindest nicht für Mac Chrome oder Firefox.

Dankbar für jede Hilfe, -

    
Dave 02.01.2017, 03:48
quelle

2 Antworten

1

Das Problem ist, dass wenn Sie tab drücken, der Fokus auf .select statt auf .select-styled div element liegt, da .select der Elternteil ist, der den Rest der Elemente enthält. Sie müssen also möglicherweise Ihre keydown an .select binden.

%Vor%

Hier ist das Updated Fiddle

    
Guruprasad Rao 02.01.2017, 04:05
quelle
1

Wenn Sie Ihrem .select-styled -Element das tabindex -Attribut (z. B. tabindex="1" ) geben, kann es JavaScript-Tastaturereignisse empfangen.

Erläuterung: Die jQuery-API für .keydown() erwähnt, dass sie nur für fokussierbare Elemente funktioniert:

  

Es kann an ein beliebiges Element angehängt werden, aber das Ereignis wird nur an das Element gesendet   Element, das den Fokus hat. Fokussierbare Elemente können variieren zwischen   Browser, aber Formelemente können immer den Fokus bekommen, also sind sie vernünftig   Kandidaten für diesen Ereignistyp.

Pro vorherige Stack Overflow-Antwort , <div> Elemente sind dies nicht standardmäßig fokussierbar, aber DOM Level 2 HTML gibt das unter anderen Regeln an Element mit einem tabindex kann den Fokus erhalten:

  

Heutige Browser definieren focus () für HTMLElement, aber ein Element nicht   eigentlich den Fokus nehmen, es sei denn, es ist einer von:

     
  • HTMLAnchorElement / HTMLAreaElement mit einer href
  •   
  • HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement   aber nicht mit deaktiviert (IE gibt Ihnen tatsächlich einen Fehler, wenn Sie versuchen),   und Datei-Uploads haben aus Sicherheitsgründen ein ungewöhnliches Verhalten
  •   
  • HTMLIFrameElement (obwohl das Fokussieren nichts nützliches macht).   Andere Einbettungselemente auch, vielleicht habe ich sie nicht alle getestet.
  •   
  • Jedes Element mit einem tabindex
  •   

Alternativ , und das ist vielleicht besser, Sie könnten Ihren keydown -Ereignishandler einfach an $(document) binden, wenn das Element focus empfängt (was Ihr jQuery bereits ohne ein Problem verarbeitet) ), und lösen Sie es auf blur .

    
Jon Uleis 02.01.2017 04:04
quelle

Tags und Links