Schriftfarbe bei Keyevent ändern

[snoot]

Hi,

ich navigiere mit den Pfeiltasten durch eine Liste.

Dabei soll das aktuelle Element einen blauen Hintergrund bekommen und eine weiße Schriftfarbe. Das zuvor ausgewählte Element (das gerade blau/weiß war) soll wieder keine Hintergrundfarbe und eine schwarze Schrift haben. Das mit dem Hintergrund klappt, aber die Schriftfarbe lässt sich einfach nicht ändern; die bleibt stur schwarz.

Hat jemand eine Idee, warum?

  
function keyPressed (evt)  
{  
  var curKey = evt.keyCode;  
  switch (curKey)  
  {  
  case 38: // hoch  
  if(curElement && !curElement.previousSibling)  
  {  
    // neu ausgewähltes Element  
    curElement = naviElement.lastChild.previousSibling;  
    curElement.style.backgroundColor = '#6990b6';        // funktioniert  
    curElement.style.color = '#ffffff';                  // funktioniert NICHT  
  
    // vorheriges Element  
    firstElement = naviElement.firstChild;  
    firstElement.style.backgroundColor = '';             // funktioniert  
    firstElement.style.color = '#000000';  
  }  
  ...  
}

[Gunnar Bittersmann]

@@snoot:

nuqneH

ich navigiere mit den Pfeiltasten durch eine Liste.
Dabei soll das aktuelle Element einen blauen Hintergrund bekommen und eine weiße Schriftfarbe.

Warum willst eine Technologie (JavaScript) einsetzen, die nicht die Darstellung betrifft? Verwende die Technologie, die dafür gedacht ist: CSS.

Die Pseudoklasse :focus dürfte für dich von Interesse sein.

Qapla'

[snoot]

Verwende die Technologie, die dafür gedacht ist: CSS.

Wie sage ich CSS denn, dass ich mit den Pfeiltasten durch die Liste navigiere? Das bekommt von dem Event doch gar nichts mit.

[apsel]

Om nah hoo pez nyeetz, snoot!

Wie sage ich CSS denn, dass ich mit den Pfeiltasten durch die Liste navigiere?

Das brauchst du nicht.

verwende im css z.B. li:focus {color:#ffffff; background-color:#6990b6}

Matthias

[snoot]

verwende im css z.B. li:focus {color:#ffffff; background-color:#6990b6}

Aber :focus reagiert doch nur auf Tab, nicht aber auf die Pfeiltasten. Ich hab's zwar mal probiert, aber da tut sich nichts.

[apsel]

Om nah hoo pez nyeetz, snoot!

Aber :focus reagiert doch nur auf Tab, nicht aber auf die Pfeiltasten. Ich hab's zwar mal probiert, aber da tut sich nichts.

Man muss erstmal zum Beispiel durch TAB oder Click den Mauszeiger in das Dokument setzen, dann kann man mit den Pfeiltasten navigieren und dann reagiert auch :focus.

Matthias

[snoot]

Man muss erstmal zum Beispiel durch TAB oder Click den Mauszeiger in das Dokument setzen, dann kann man mit den Pfeiltasten navigieren und dann reagiert auch :focus.

Tut man in meinem Fall aber nicht - die Liste ist nicht da, wo man mit der Maus hinklickt oder mit Tab hinkommt.

Also zurück zur eigentlichen Frage - wieso tut JS nicht das, was es soll? :)

[Gunnar Bittersmann]

@@snoot:

nuqneH

Man muss erstmal zum Beispiel durch TAB oder Click den Mauszeiger in das Dokument setzen
Tut man in meinem Fall aber nicht

Dann tue _dies_ mit JavaScript. In einigen Browsern auch schon mit @autofocus. [HTML5 §4.10.19.4]

Also zurück zur eigentlichen Frage - wieso tut JS nicht das, was es soll? :)

Das ist nicht deine eigentliche Frage.

Deine eigentliche Frage ist: Wie kann ich mein Ziel erreichen, das jeweils fokussierte Element hervorzuheben?

Qapla'

[snoot]

Man muss erstmal zum Beispiel durch TAB oder Click den Mauszeiger in das Dokument setzen
Tut man in meinem Fall aber nicht

Dann tue _dies_ mit JavaScript. In einigen Browsern auch schon mit @autofocus. [HTML5 §4.10.19.4]

Das ist leider nicht möglich, da sich der Focus während des "Tastendrückens" in einem Eingabefeld befindet. Ich kann ihn also nicht auf die Liste setzen.

[cygnus]

Hallo :)

Das dürfte dich interessieren:
http://hyperkontext.at/weblog/artikel/der-tastatur-den-fokus-zeigen/

mfg
cygnus