javascript und input-Formularfeld

[Johannes]

Hallo liebes Forum,

ich arbeite gerade an einem Formular, in dem auch ein Datumsfeld vorkommt, dessen Eingabewert an eine Datenbank übergeben werden soll. Dazu verwende ich ein Datumsvalidierungsskript, das beim Abschicken des Formulars die Datumseingabe überprüft.

Zusätzlich soll schon beim Tastendruck überprüft werden, ob die gewählte Taste an dieser Stelle zulässig ist oder nicht. Dazu fange ich die gedrückte Taste mit window.event und dem event-Händler onkeypress ab. Anschließend frage ich die Länge des input-Feldes ab und bestimme daran, welche Tasten zulässig sind (z.B. bei einer Länge von 2 oder 5 erlaube nur "." weil TT.MM.JJJJ usw.).

Das funktioniert auch so weit so gut. Nur wenn ich die Länge des input-Feldes abfrage, gehe ich davon aus, daß die gedrückte Taste immer ans Ende gesetzt wird. Ein Problem habe ich, wenn der User im Formular die Pfeiltaste links benutzt und Zeichen in der Mitte des Eingabefeldes löscht und einfügt.

Daher meine Frage: Gibt es irgendwelche Javascript-Befehle mit denen ich die Position abfragen kann, an der die gedrückte Taste in den value-String eingefügt wird? Oder wüßte jemand eine andere Idee, wie man das lösen kann?

Würde mich über eine Antwort sehr freuen.

Gruß,

Johannes

[Gunnar Bittersmann]

welche Tasten zulässig sind (z.B. bei einer Länge von 2 oder 5 erlaube nur "." weil TT.MM.JJJJ usw.).

Johannes,
Du solltest unbedingt auch "-" erlauben wegen JJJJ-MM-TT (in DE laut DIN 5001 gültiges Datumformat).

Auch T.M.JJ, T.M.JJJJ, TT.MM.JJ und JJ-MM-TT solltest du zulassen.

Damit ist dein Konzept der Überprüfung schon während der Eingabe hinfällig.

Gunnar

[Siechfred]

Tag Johannes.

Gibt es irgendwelche Javascript-Befehle mit denen ich die Position abfragen kann, an der die gedrückte Taste in den value-String eingefügt wird?

Ja, allerdings sehr browserspezifisch. In Geckos kannst du die Position mit Hilfe von selectionStart, im IE mit Hilfe von document.selection.createRange beeinflussen. Im Opera dagegen hast du keine Möglichkeit, die Cursorposition innerhalb eines Eingabefeldes abzufragen.

Oder wüßte jemand eine andere Idee, wie man das lösen kann?

Mach doch drei Eingabefelder als Dropdownlisten (Tag, Monat, Jahr), dann kannst du hier ganz auf Javascript verzichten. Die Umwandlung in das von dir gewünschte Datumsformat besorgst du dann im verarbeitenden serverseitigen Script.

[dsf 3.6]
Siechfred

[Gunnar Bittersmann]

Mach doch drei Eingabefelder als Dropdownlisten (Tag, Monat, Jahr),

Siechfred,
Na da werden sich die Nutzer aber freuen.

Wie lange bruachst du, um per Tastatur 6 oder 8 Ziffern einzutippen?
Wie lange brauchst du, um mit Maus oder Tastatur aus 3 verschiedenen Dropdownmenüs den jeweils richtigen Eintrag auszuwählen?

Gunnar

[Siechfred]

Tag Gunnar.

Mach doch drei Eingabefelder als Dropdownlisten (Tag, Monat, Jahr),
Na da werden sich die Nutzer aber freuen.

Ich kenne genügend Seiten, wo das so gelöst ist.

Wie lange bruachst du, um per Tastatur 6 oder 8 Ziffern einzutippen?
Wie lange brauchst du, um mit Maus oder Tastatur aus 3 verschiedenen Dropdownmenüs den jeweils richtigen Eintrag auszuwählen?

Wenn wir bei der Frage Bedienkomfort sind, ist die galanteste Lösung immer noch die automatische Datumserkennung und -umwandlung, wozu dann wiederum Javascript erforderlich ist. Also ich gebe z.B. 0501 ein, daraus wird der 01.05.2005 (das aktuelle Jahr wird automatisch angehängt). Gäbe ich 010504 ein, würde daraus der 01.05.2004, gäbe ich 1/1/03 ein, würde daraus der 01.01.2003.

Siechfred

[Gunnar Bittersmann]

Ich kenne genügend Seiten, wo das so gelöst ist.

Siechfred,
Ich kenne auch genügend Seiten mit Flash-Intros, Newstickern o.ä. Blödsinn.
Gunnar

[Siechfred]

Tag Gunnar.

Ich kenne genügend Seiten, wo das so gelöst ist.
Ich kenne auch genügend Seiten mit Flash-Intros, Newstickern o.ä. Blödsinn.

Ich weiß nicht, was du gegen die von mir vorgeschlagene Alternative hast (außer dass du subjektiv das Gefühl hast, dass die Datumseingabe per Tastatur weniger aufwändig ist als über die Dropdownmenüs). Was ich unter echter Usability verstehe, hatte ich dir bereits in https://forum.selfhtml.org/?t=97859&m=596094 geschrieben. Wenn du also die Freundlichkeit hättest, mir als Laien die objektiven Nachteile meines Vorschlags, insbesondere im Hinblick auf den von dir gewählten Themenbereich DESIGN, verständlich zu machen, wäre ich dir dankbar.

Siechfred

[Gunnar Bittersmann]

Hi Зихфрид,

insbesondere im Hinblick auf den von dir gewählten Themenbereich DESIGN,

Natürlich ist es eine Designfrage, ob zur Datumeingabe ein oder drei Textfelder oder Dropdownmenüs gewählt werden. Design ist weitaus mehr als Layout.

Die dreifache Auswahl aus Dropdownmenüs ist zeit- und bewegungsaufwendig: Mausbewegung, Click auf Pfeil (erstmal treffen), Click auf Auswahl, Mausbewegung, Click auf nächsten Pfeil ... Besonders die Tagesliste mit 31 Einträgen ist sehr lang, da wird evtl. sogar noch Scrollen erforderlich sein. Da ist man mit der Tastatur viel schneller.

Bei drei Eingabefeldern muss die Reihenfolge festgelegt werden. Willst du mir Tag-Monat-Jahr aufzwängen? Ich hätte gern Jahr-Monat-Tag.

Ich denke, viele User wissen auch gar nicht, dass man auch mit der Tab-Taste von einem Feld zum nächsten kommt und benutzen die Maus, brauchen also zwei verschiedene Eingabegeräte.

Und wer sich vertippt hat, muss Fenster zurück wechseln, d.h. Maus oder Shift+Tab.

Das ganze Datum in einem Feld bereitet keine Probleme: am Anfang vertippt? – man ist ja mit den Cursortasten schnell da, Home und End machen's noch leichter.

Die Trennzeichen "-", ".", "/" befinden sich auch alle auf der Tastatur in der Nähe der Ziffern im numerischen Eingabeblock (bei mir schon, englischer Tatstaturtreiber), so dass ein Datum auch leicht mit einer Hand einzutippen ist.

Bei einem Feld kann der User auch das Datum in dem für ihn gewohnten Format (JJJJ-MM-TT, TT.MM.JJJJ, ...) eingeben, die Interpretation übernimmt die auswertende Software.

Ich sehe bei einem Datumfeld keine Nachteile, bei den anderen Varianten dafür gewaltige.

Gunnar

[Gunnar Bittersmann]

Hi Зихфрид,

Wenn wir bei der Frage Bedienkomfort sind, ist die galanteste Lösung immer noch die automatische Datumserkennung und -umwandlung,

Ja. Ist aber nicht ganz unproblematisch.

Also ich gebe z.B. 0501 ein, daraus wird der 01.05.

Nicht der 5. Januar?

Gäbe ich 010504 ein, würde daraus der 01.05.2004,

Nicht der 4. Mai 2001?

Die Interpretation von Angaben ohne Trennzeichen kann nicht immer gelingen. Bei "-" könnte man von der Reihenfolge Jahr-Monat-Tag (internationales Datumformat) ausgehen, bei "." von Tag-Monat-Jahr (alte deutsche Schreibweise).

gäbe ich 1/1/03 ein, würde daraus der 01.01.2003.

"/" ist problematisch: bei den Briten ist es Tag-Monat-Jahr, bei den Amerikanern Monat-Tag-Jahr, und bei uns gänzlich unüblich.

Gunnar

[Siechfred]

Tag Gunnar.

Wenn wir bei der Frage Bedienkomfort sind, ist die galanteste Lösung immer noch die automatische Datumserkennung und -umwandlung,
Ja. Ist aber nicht ganz unproblematisch.

Das ist mir klar, dabei kommt es natürlich darauf an, an wen sich die Seite wendet.

Also ich gebe z.B. 0501 ein, daraus wird der 01.05.
Nicht der 5. Januar?

Kleiner Vertippser meinerseits :)

Die Interpretation von Angaben ohne Trennzeichen kann nicht immer gelingen. Bei "-" könnte man von der Reihenfolge Jahr-Monat-Tag (internationales Datumformat) ausgehen, bei "." von Tag-Monat-Jahr (alte deutsche Schreibweise).

Ja, da hast du Recht. Und genau vor diesem Hintergrund sind drei Eingabefelder vielleicht doch nicht die schlechteste Lösung, denke ich. Es müssen ja keine Dropdowns sein, auch Texteingabefelder sind denkbar, bei denen der Focus nach Erreichen der Maximallänge automatisch in das nächste Eingabefeld springt. Aber da wären wir wieder bei Javascript :)

Siechfred

[Gunnar Bittersmann]

Siechfred,

Ja, da hast du Recht. Und genau vor diesem Hintergrund sind drei Eingabefelder vielleicht doch nicht die schlechteste Lösung, denke ich. Es müssen ja keine Dropdowns sein, auch Texteingabefelder sind denkbar, bei denen der Focus nach Erreichen der Maximallänge automatisch in das nächste Eingabefeld springt. Aber da wären wir wieder bei Javascript :)

... und bei den Problemen (festgelegte Reihenfolge, umständliche Fehlerkorrektur, Mausbenutzung - zumindest großer Abstand von Ziffern zur Tab-Taste), die ich in https://forum.selfhtml.org/?t=97859&m=596584 ansprach.

Gunnar

[Johannes]

Ok. Vielen Dank für die Antworten. Das ist natürlich schlecht, daß diese Befehle browserspezifisch sind. Aber ich denke mittlerweile auch, daß das was ich vorhatte, nicht so leicht mit 3 Zeilen umzusetzen ist. Besser ich lasse es weg und mache mehrere Felder, vielleicht drop-downlisten, daraus. Vielen Dank jedenfalls für die Hilfe.

Johannes

Tag Johannes.

Gibt es irgendwelche Javascript-Befehle mit denen ich die Position abfragen kann, an der die gedrückte Taste in den value-String eingefügt wird?

Ja, allerdings sehr browserspezifisch. In Geckos kannst du die Position mit Hilfe von selectionStart, im IE mit Hilfe von document.selection.createRange beeinflussen. Im Opera dagegen hast du keine Möglichkeit, die Cursorposition innerhalb eines Eingabefeldes abzufragen.

Oder wüßte jemand eine andere Idee, wie man das lösen kann?

Mach doch drei Eingabefelder als Dropdownlisten (Tag, Monat, Jahr), dann kannst du hier ganz auf Javascript verzichten. Die Umwandlung in das von dir gewünschte Datumsformat besorgst du dann im verarbeitenden serverseitigen Script.

[dsf 3.6]
Siechfred

[Gunnar Bittersmann]

Johannes,

Besser ich lasse es weg und mache mehrere Felder,

Nicht besser. Gestalte bitte dein Formular so, dass es die BENUTZER am besten nutzen können, nicht so, dass es DIR am wenigsten Programmieraufwand abverlangt.

Es ist für den Nutzer viel einfacher, ein Datum in EIN Feld einzutragen als dafür zwischen mehreren springen zu müssen.

vielleicht drop-downlisten, daraus.

Noch schlimmer. Aber das sagte ich ja schon.

Gunnar