nicht angemeldet
MudGuard
molily
MudGuard
Der Martin
MudGuard
MudGuard
MudGuard
Der Martin
MudGuard
MudGuard
molily
MudGuard
Hi,
Innerhalb eines Formulars hab ich ein div, das als "Popup" (absolut positioniert) erscheint.
In diesem div sind jede Menge Controls.
Unter anderem auch ein Button mit Beschriftung "OK", der dafür sorgt, daß Werte aus dem "Popup" in eine der Controls der form überträgt.
Wie bei einem normalen Windows-Dialog hätte ich jetzt gerne, daß die Betätigung der Return-Taste den OK-Button auslöst.
Normalerweise wäre das per form und submit-Button zu regeln - aber da sich das "Popup" bereits innerhalb eines Formulars befindet, kommt das nicht in Frage.
Also hangestrickt.
An sich auch kein Problem, ich hab dem div einen onkeydown-Handler verpaßt, der auf die Returntaste prüft und dann dieselbe Funktion aufruft, die auch bei onclick auf dem OK-Button aufgerufen wird. Soweit funktioniert das ganze wunderbar.
Aber: in meinem "Popup" gibt es auch select-Elemente.
Auch noch kein Problem - wenn das select-Element nicht ausgeklappt ist, soll die Return-Taste auch den OK-Button auslösen. Aber wenn das select-Element ausgeklappt ist (also die Liste der Optionen sichtbar ist), sollte wie üblich die Returntaste zum Zuklappen führen.
Ich bräuchte also zweierlei:
1. irgendwie verhindern, daß das event vom select bis zum div aufsteigt - ok, per stopPropagation bzw. cancelBubble kein Problem.
2. müßte ich im onkeydown-Eventhandler der select-Elemente erkennen können, ob die Optionsliste geöffnet ist und nur bei nicht-ausgeklappter Optionsliste die events doch aufsteigen zu lassen.
Es bringt auch nichts, statt dem "Popup"-div das onkeydown zuzuweisen, allen controls im "Popup" das event zuzuweisen, denn das Problem bleibt - zu erkennen, ob im select die optionliste aufgeklappt ist oder nicht.
Ist diese Erkennung möglich? Wenn ja, wie?
TIA
cu,
Andreas
Hallo,
Aber wenn das select-Element ausgeklappt ist (also die Liste der Optionen sichtbar ist), sollte wie üblich die Returntaste zum Zuklappen führen.
Ich verstehe nicht ganz das Szenario.
Wenn ich mit der Tastatur ein select anspringe, dann kann ich im IE, Firefox und Konqueror das Feld nicht zum Aufklappen bringen (Linux jeweils). Ich kann nur mit Pfeil hoch / Pfeil runter durch die Optionen schalten, wohlgemerkt bei geschlossenem Feld.
Im Opera geht das Öffnen mit der Leertaste, im Screenreader JAWS z.B. mit der Enter-Taste, wenn ich mich recht erinnere.
Wann also kann ein Benutzer die geöffnete Box per Entertaste zuklappen? Da fällt mir nur ein Szenario ein:
Er klappt die Box durch einen Klick darauf auf. (Wenn er dann eine Option anklickt, klappt sie sofort wieder zu, also macht er das nicht, sondern:) Er wählt mit den Pfeiltasten die gewünschte Option (oder belässt es bei der Wahl) und drückt dann Enter. Damit klappt die Box zu.
Ein bisschen konstruiert, dieses Zusammenspiel von Maus und Tastatur, oder?
Aber gut, im Firefox passieren Firefox folgende Ereignisse:
1. focus
2. click
3. Mehrere keypress mit Pfeil hoch / Pfeil runter
4. Gegebenenfalls change
5. keypress mit Enter
6. Events bubblen zum div, dort überwachst du keypress
Im Firefox kannst du über click ganz einfach feststellen, ob die Box mit der Maus geöffnet oder geschlossen wurde, und ein Enter-keypress schließt die Box.
Im IE ist es etwas dumm, da löst das Öffnen per Klick zwar ein click aus, aber das Schließen nicht. Wenn die Box nur geöffnet wird, funktioniert die Geöffnet-Erkennung für Firefox, andernfalls hat sie genau falsch gepolte Resultate (beim zweiten Öffnen und Schließen stimmt der Wert dann wieder usw.).
Opera und Konqueror unter Linux:
Das Öffnen per Klick löst nur einen focus aus, das Zuklappen per Klick allerdings einen click. Erkennung des Status ist damit ausgeschlossen.
Das Zuklappen durch Enter löst (bei Änderung) nur einen change aus, keinen keypress, keyup oder keydown.
Allerdings feuert ein keypress beim Drücken von Enter im zugeklappten Zustand, in den Browsern kannst du dir also sicher sein, dass jeder Enter-keypress »sauber« ist.
Naja, ich glaube nicht, dass du da was Cross-Browser draus basteln kannst - und ich verstehe die Notwendigkeit auch nicht. Bei reiner Tastaturbedienung klappt die Box bei meinen Tests für gewöhnlich nicht auf, und Screenreader und Co. kriegt man bei sowas eh nicht berücksichtigt.
Mathias
Hallo,
Ein bisschen konstruiert, dieses Zusammenspiel von Maus und Tastatur, oder?
Aber gut, im Firefox passieren Firefox folgende Ereignisse:
- focus
- click
- Mehrere keypress mit Pfeil hoch / Pfeil runter
- Gegebenenfalls change
- keypress mit Enter
- Events bubblen zum div, dort überwachst du keypress
Im Firefox kannst du über click ganz einfach feststellen, ob die Box mit der Maus geöffnet oder geschlossen wurde, und ein Enter-keypress schließt die Box.
Im IE ist es etwas dumm, da löst das Öffnen per Klick zwar ein click aus, aber das Schließen nicht.
Wenn, dann könnte er es einfacher machen: so lange der Fokus auf die select-Box liegt, kann er die Entertaste abfragen* und dieses Enter ignorieren. Damit muss er nur zwei Dinge abfragen überprüfen. (oder sehe ich da was jetzt nicht?)
*)Ich stelle jetzt nicht in Frage / zur Debatte wie er das abfragt.
Grüße
Thomas
Hi,
Wenn, dann könnte er es einfacher machen: so lange der Fokus auf die select-Box liegt, kann er die Entertaste abfragen* und dieses Enter ignorieren.
Nein. Ob das Select-Element den Fokus hat, sagt nichts darüber aus, ob sie ausgeklappt ist oder nicht.
*)Ich stelle jetzt nicht in Frage / zur Debatte wie er das abfragt.
Das wiederum ist ganz einfach. Hat das Select-Element den Fokus, löst der Tastendruck den onkeydown-Event im Select-Element aus, andernfalls nicht.
cu,
Andreas
Mon Freunde,
Nein. Ob das Select-Element den Fokus hat, sagt nichts darüber aus, ob sie ausgeklappt ist oder nicht.
in einer Richtung schon: Es kann nur dann aufgeklappt sein, wenn es auch den Focus hat - zumindest unter Windows klappt eine Dropdown-Liste (HTML-Element select) beim Focusverlust automatisch zu.
Ist das bei anderen GUIs etwa nicht so?
Schönen Sonntag noch,
Martin
Hi,
Nein. Ob das Select-Element den Fokus hat, sagt nichts darüber aus, ob sie ausgeklappt ist oder nicht.
in einer Richtung schon: Es kann nur dann aufgeklappt sein, wenn es auch den Focus hat - zumindest unter Windows klappt eine Dropdown-Liste (HTML-Element select) beim Focusverlust automatisch zu.
Anhand von nichtvorhandenem Focus kann festgestellt werden, daß die Liste eingeklappt ist, ja.
Bei nicht-vorhandenem Focus existiert aber das Problem gar nicht erst, da dann auch der key-Eventhandler nicht im select auftritt.
Anhand von vorhandenem Focus kann aber nicht festgestellt werden, ob die Liste aus- oder eingeklappt ist.
cu,
Andreas
Hallo,
Anhand von vorhandenem Focus kann aber nicht festgestellt werden, ob die Liste aus- oder eingeklappt ist.
Man könnte bei SELECT.onfocus beginnen zu zählen, wie oft Enter gedrückt wurde (Der Zähler könnte eine Eigenschaft des SELECTs sein.) und bis zum _zweiten_ Enter die Event-Propagation stoppen bzw. cancelBubble auf true setzen. Dann müsste man zwei Mal Enter drücken zum Absenden, wenn das SELECT den Focus hat. Zumindest das normale Ausfüllen sollte damit erleichtert werden (Focus->Liste aufklappen->Auswählen->Enter führt dann nicht zum Absenden). Probleme gäbe es nur, wenn man bei einmaligem Focus die Liste zwei Mal aufklappt.
Das reicht Dir nicht, oder?
viele Grüße
Axel
Hallo,
Probleme gäbe es nur, wenn man bei einmaligem Focus die Liste zwei Mal aufklappt.
Das könnte man entschärfen, wenn man SELECT.onchange den Enter-Zähler wieder auf 0 setzt.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
#control { position:absolute; top:200px; left:200px; width:200px; background-color:#00AFAF; padding:20px; }
#control p { margin:0; padding:0; margin-bottom:5px; }
</style>
<script type="text/javascript">
<!--
window.onload = function() {
var myControl = document.getElementById("control");
var mySelect = myControl.getElementsByTagName("SELECT")[0];
myControl.onkeypress = function(e) {
e = (e)?e:window.event;
if(e.which == 13) absenden();
else if(e.keyCode == 13) absenden();
else return true;
};
mySelect.onfocus = function() {
this.EnterZaehler = 0;
};
mySelect.onchange = function() {
this.EnterZaehler = 0;
};
mySelect.onkeypress = function(e) {
e = (e)?e:window.event;
if(e.which == 13 && this.EnterZaehler == 0) {
mySelect.EnterZaehler = 1;
if (e.stopPropagation) e.stopPropagation();
else if (e.cancelBubble === false) e.cancelBubble = true;
} else if(e.keyCode == 13 && this.EnterZaehler == 0) {
mySelect.EnterZaehler = 1;
if (e.stopPropagation) e.stopPropagation();
else if (e.cancelBubble === false) e.cancelBubble = true;
}
else {
return true;
}
};
};
function absenden() {
alert("absenden");
}
//-->
</script>
</head>
<body>
<div id="control">
<p><input type="Text" name="t1" value="" size="20" maxlength="20"></p>
<p><select name="s1" size="1">
<option value="o1">O1</option>
<option value="o2">O2</option>
<option value="o3">O3</option>
</select></p>
<p><input name="ok" value="OK" type="button"></p>
</div>
</body>
</html>
viele Grüße
Axel
Hallo,
...
> mySelect.onkeypress = function(e) {
> e = (e)?e:window.event;
> if(e.which == 13 && this.EnterZaehler == 0) {
> //mySelect.EnterZaehler = 1;
//^ hier sollte natürlich auch this genutzt werden
this.EnterZaehler = 1;
> if (e.stopPropagation) e.stopPropagation();
> else if (e.cancelBubble === false) e.cancelBubble = true;
> } else if(e.keyCode == 13 && this.EnterZaehler == 0) {
> //mySelect.EnterZaehler = 1;
//^ hier auch
this.EnterZaehler = 1;
> if (e.stopPropagation) e.stopPropagation();
> else if (e.cancelBubble === false) e.cancelBubble = true;
> }
> else {
> return true;
> }
> };
viele Grüße
Axel
Hallo Andreas,
Wenn, dann könnte er es einfacher machen: so lange der Fokus auf die select-Box liegt, kann er die Entertaste abfragen* und dieses Enter ignorieren.
Nein. Ob das Select-Element den Fokus hat, sagt nichts darüber aus, ob sie ausgeklappt ist oder nicht.
Das ist wahr.
Ich habe deine Frage anders verstanden.
Irgendwie habe ich das Gefühl, dass du dir die Sache komplizierter machst, als es wirklich nötig wäre. Kann das sein?
Grüße
Thomas
Hi,
Irgendwie habe ich das Gefühl, dass du dir die Sache komplizierter machst, als es wirklich nötig wäre. Kann das sein?
Nein, das kann nicht sein. Es sind meine User, die es mir unnötig schwer machen ;-)
cu,
Andreas
Hi,
Wenn ich mit der Tastatur ein select anspringe, dann kann ich im IE, Firefox und Konqueror das Feld nicht zum Aufklappen bringen (Linux jeweils).
Mir ist auch unter Windows kein Weg bekannt, die Liste per Tastatur auszuklappen.
Danach hatten meine User aber auch schon gefragt - bisher nehmen sie notgedrungen zum Ausklappen der Liste die Maus ...
Wann also kann ein Benutzer die geöffnete Box per Entertaste zuklappen? Da fällt mir nur ein Szenario ein:
Er klappt die Box durch einen Klick darauf auf. (Wenn er dann eine Option anklickt, klappt sie sofort wieder zu, also macht er das nicht, sondern:) Er wählt mit den Pfeiltasten die gewünschte Option (oder belässt es bei der Wahl) und drückt dann Enter. Damit klappt die Box zu.
Richtig, so machen die User (geschlossene Usergruppe, die aber unterschiedliche Browser benutzen) das - allerdings nutzen sie nicht nur die Pfeiltasten, sondern tippen auch Buchstaben, um Einträge zu selektieren.
Ein bisschen konstruiert, dieses Zusammenspiel von Maus und Tastatur, oder?
Nein, es ist das, was meine User machen.
Naja, ich glaube nicht, dass du da was Cross-Browser draus basteln kannst
Ich hatte die Hoffnung, daß es dafür eine (mir noch nicht bekannte) Eigenschaft gibt, sowas wie mySelect.isListOpen oder so ähnlich.
cu,
Andreas
Hallo,
Mir ist auch unter Windows kein Weg bekannt, die Liste per Tastatur auszuklappen.
das geht unter Windows normalerweise mit F4.
"Normalerweise" deswegen, weil der IE diese Möglichkeit zunichte macht, indem er die F4-Taste schon global abfragt und damit die Dropdownliste seiner Adressleiste aufklappt. Dieser Tastatur-Shortcut wird den Formularelementen auf der Seite also gar nicht mehr mitgeteilt.
Danach hatten meine User aber auch schon gefragt - bisher nehmen sie notgedrungen zum Ausklappen der Liste die Maus ...
Opera habe ich gerade nicht zur Hand, aber im FF funktioniert es mit F4.
Ich hatte die Hoffnung, daß es dafür eine (mir noch nicht bekannte) Eigenschaft gibt, sowas wie mySelect.isListOpen oder so ähnlich.
:-(
Schönen Sonntag noch,
Martin
Hi,
Mir ist auch unter Windows kein Weg bekannt, die Liste per Tastatur auszuklappen.
das geht unter Windows normalerweise mit F4.
Ah. Kannte ich noch nicht. Werde ich den Usern sagen.
"Normalerweise" deswegen, weil der IE diese Möglichkeit zunichte macht, indem er die F4-Taste schon global abfragt und damit die Dropdownliste seiner Adressleiste aufklappt. Dieser Tastatur-Shortcut wird den Formularelementen auf der Seite also gar nicht mehr mitgeteilt.
:-(
Opera habe ich gerade nicht zur Hand, aber im FF funktioniert es mit F4.
Opera blendet mit F4 die "Panels" ein/aus.
Ich hatte die Hoffnung, daß es dafür eine (mir noch nicht bekannte) Eigenschaft gibt, sowas wie mySelect.isListOpen oder so ähnlich.
:-(
Du findest es bedauerlich, daß ich noch Hoffnung habe? ;-)
cu,
Andreas
Moin Andreas,
Mir ist auch unter Windows kein Weg bekannt, die Liste per Tastatur auszuklappen.
das geht unter Windows normalerweise mit F4.
Ah. Kannte ich noch nicht. Werde ich den Usern sagen.
dann kannst Du noch Alt + Pfeiltaste erwähnen. ;-)
Viele Grüße
Jörg
Hallo Jörg,
dann kannst Du noch Alt + Pfeiltaste erwähnen. ;-)
Gerade unter Linux getestet:
Browser | Alt+Pfeil runter | Alt+Pfeil hoch | F4
--------------------+---------------------+---------------------+----------------------------------
Firefox 1.5.0.6 | Dropdown klappt auf | Dropdown klappt auf | Keine Reaktion
Opera 9.00 | Dropdown klappt auf | Keine Reaktion | "Panels" geht auf/zu
IE 6.0.2800.1106 | Dropdown klappt auf | Dropdown klappt auf | Adressleiste-Dropdown klappt auf
Konqueror 3.5.2 | Dropdown klappt auf | Verzeichnis höher¹ | Kommandozeilenfenster geht auf
Ergebnis: Portable Möglichkeit, das Dropdown zu öffnen, ist Alt+Pfeil runter.
Viele Grüße,
Christian
¹ Aus »/bla/foo/blub« wird »/bla/foo« im URL - d.h. er streicht den letzten Pfad-Teil (und Query-String und Fragment Identifier) weg.
Hi,
denn das Problem bleibt - zu erkennen, ob im select die optionliste aufgeklappt ist oder nicht.
Auf der Suche nach einer möglichst einfachen Lösung hab ich mir jetzt mal alle Eigenschaften des select-Elements in ein- und ausgeklapptem Zustand aufgelistet. Kein Unterschied.
Es gibt allerdings eine Funktion, die ich nicht kenne, bei der mir auch nicht klar ist, was sie machen soll:
function getFeature() {
[native code]
}
Weiß das jemand?
cu,
Andreas
Hallo,
Es gibt allerdings eine Funktion, die ich nicht kenne, bei der mir auch nicht klar ist, was sie machen soll:
function getFeature() {
[native code]
}Weiß das jemand?
Im FF ohne Parameter aufgerufen zeigt die Fehlermeldung
Fehler: uncaught exception: [Exception... "Not enough arguments [nsIDOM3Node.getFeature]"
dass es sich um eine Methode eines nsIDOM3Node handelt. Google führt uns zur sehr aussagefähigen Dokumentation: http://www.xulplanet.com/references/xpcomref/ifaces/nsIDOM3Node.html.
Hm ;-)
Allerdings glaube ich nicht, dass dies etwas mit speziellen Eigenschaften von HTMLSelectElementen zu tun hat.
viele Grüße
Axel
Hallo,
Es gibt allerdings eine Funktion, die ich nicht kenne, bei der mir auch nicht klar ist, was sie machen soll:
function getFeature() {
[native code]
}
http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-getFeature
http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMFeatures
Das hilft dir nicht weiter, dieses megakluge System der Abfrage von DOM-Browserunterstützung hat eh nie funktioniert. ;)
Mathias
Hi,
noch ne Frage, die zwar nichts direkt mit der select-Problematik zu tun hat, aber mit dem Debugging von Javascript:
Kann man eigentlich irgendwie im Firefox irgendwie Meldungen in die Javascript-Konsole schreiben?
Wäre wesentlich praktischer als mit alert, welches man ja immer bestätigen muß, bevor es weitergeht.
cu,
Andreas
Hi,
Mist, versehentlich bei falschem Fokus auf Return gekommen, der Titel sollte doch noch geändert werden ...
cu,
Andreas
Hallo,
das geht mit der Firebug Extension für Firefox http://www.joehewitt.com/software/firebug/
Ciao
Hi,
das geht mit der Firebug Extension für Firefox http://www.joehewitt.com/software/firebug/
Mag sein. Das Ding weigert sich aber, sich zu installieren.
Bzw. es kommt der normale Install-Dialog usw.
Nach dem Neustart des Firefox taucht Firebug aber nicht in der Extension-Liste auf.
cu,
Andreas
Hallo,
das geht mit der Firebug Extension für Firefox http://www.joehewitt.com/software/firebug/
Mag sein. Das Ding weigert sich aber, sich zu installieren.
Bzw. es kommt der normale Install-Dialog usw.
Nach dem Neustart des Firefox taucht Firebug aber nicht in der Extension-Liste auf.
Das ist schade. Diese Extension ist wirklich ein Traum.
Ansonsten bietet sich natürlich ein eigenes kleines Logging-System an, das Deine Meldungen in ein Loggin-Div oder so schreibt. Aber das brauche ich Dir vermutlich nicht sagen ;)
Ciao
Hallo,
window.dump plus eine about:config-Einstellung zur Freischaltung.
Wäre wesentlich praktischer als mit alert, welches man ja immer bestätigen muß, bevor es weitergeht.
Ich habe eine Funktion log, die mir alle Ereignisse in eine Box schreibt.
http://molily.de/temp/select.html
Mathias
Hi,
window.dump plus eine about:config-Einstellung zur Freischaltung.
Das funktioniert bei mir irgendwie nicht.
Aktiviert hab ichs, den Browser zur Sicherheit beendet und neugestartet.
window.dump("blablubb")
ins script eingebaut.
Keine Reaktion - keine Fehlermeldung, kein "blablubb".
Code davor und danach wird ausgeführt.
Wäre wesentlich praktischer als mit alert, welches man ja immer bestätigen muß, bevor es weitergeht.
Ich habe eine Funktion log, die mir alle Ereignisse in eine Box schreibt.
http://molily.de/temp/select.html
Ja, sowas hab ich auch, ist aber irgendwie blöd, wenn die einen Meldungen in der Konsole auftreten, die anderen Meldungen in der eigenen Box. Dann muß ich immer an zwei stellen gucken.
cu,
Andreas
Hallo MudGuard.
window.dump plus eine about:config-Einstellung zur Freischaltung.
Das funktioniert bei mir irgendwie nicht.
Aktiviert hab ichs, den Browser zur Sicherheit beendet und neugestartet.window.dump("blablubb")
ins script eingebaut.
Du schaust ja auch auf die falsche Konsole. Starte Firefox einmal von der Kommandozeile aus. Die Meldungen werden dort ausgegeben.
Einen schönen Sonntag noch.
Gruß, Mathias
Hallo,
Du schaust ja auch auf die falsche Konsole. Starte Firefox einmal von der Kommandozeile aus. Die Meldungen werden dort ausgegeben.
also einfach über stdout? _Das_ nenne ich mal eine gute Lösung! Einfach, praktisch und ressourcenschonend.
Have a nice day,
Martin
Hallo Martin.
Du schaust ja auch auf die falsche Konsole. Starte Firefox einmal von der Kommandozeile aus. Die Meldungen werden dort ausgegeben.
also einfach über stdout?
Ganz genau:
_Das_ nenne ich mal eine gute Lösung! Einfach, praktisch und ressourcenschonend.
Ja, kann sich als recht nützlich erweisen.
Einen schönen Sonntag noch.
Gruß, Mathias