Julia: Cursor automatisch weiterspringen lassen

Hallo!

Ich hoffe, ihr könnt mir bei einem Problem mit meinem Formular helfen:

Es handelt sich um einen ziemlich langen Datenbogen, der hinterher beim Abschicken überprüft und dann in eine Datei auf dem Server geschrieben wird. Man muss an zwei Stellen ein Datum eingeben, in jeweils drei Eingabefelder, (TT),(MM),(JJJJ), die jeweils nur zwei bzw. vier Zeichen akzeptieren.

Wie kriege ich es hin, dass der Cursor nur bei den Datumsfeldern nach der Eingabe von zwei Zeichen (TT) automatisch ins nächste Feld (MM) springt usw., ohne dass man die Tabulator-Taste benutzen muss?

Das einzige, was ich bisher dazu gefunden hab, ist ein Beitrag im Archiv von Juli 2003, der besagt, dass das mit dem Weiterspringen grundsätzlich geht, aber nicht wie.

Wenn jemand mir einen Tipp geben könnte, würde ich mich riesig freuen!
Vielen Dank!

Gruß
Julia

  1. Hallo Julia,

    Wie kriege ich es hin, dass der Cursor nur bei den Datumsfeldern nach der
    Eingabe von zwei Zeichen (TT) automatisch ins nächste Feld (MM) springt
    usw., ohne dass man die Tabulator-Taste benutzen muss?

    Es empfiehlt sich das Problem in Unterprobleme zu zerlegen, und diese dann
    einzeln zu lösen.

    1. Das Skript sollte in Aktion treten, wenn der Benutzer sich im TT-Datumsfeld
         befindet. Eingaben von Benutzern werden mit Event-Handlern abgefangen.
         http://selfhtml.teamone.de/javascript/sprache/eventhandler.htm
         (Vielversprechend dürfte onFocus sein)

    2. Man muß auf das TT-Datumsfeld, d.h. eigentlich auf dessen Wert zugreifen
         können.
         http://selfhtml.teamone.de/javascript/objekte/elements.htm#value

    3. Man muß diesen Wert überprüfen, ob er aus zwei Zeichen besteht.
         http://selfhtml.teamone.de/javascript/objekte/string.htm#length

    4. Dann muß man den Fokus auf das nächste Element setzen.
         http://selfhtml.teamone.de/javascript/objekte/elements.htm#focus

    • Tim
    --
    #996
  2. Hallo,

    Ich hoffe, ihr könnt mir bei einem Problem mit meinem Formular helfen:

    Es handelt sich um einen ziemlich langen Datenbogen, der hinterher beim Abschicken überprüft und dann in eine Datei auf dem Server geschrieben wird. Man muss an zwei Stellen ein Datum eingeben, in jeweils drei Eingabefelder, (TT),(MM),(JJJJ), die jeweils nur zwei bzw. vier Zeichen akzeptieren.

    Wie kriege ich es hin, dass der Cursor nur bei den Datumsfeldern nach der Eingabe von zwei Zeichen (TT) automatisch ins nächste Feld (MM) springt usw., ohne dass man die Tabulator-Taste benutzen muss?

    Fange in den Eingabefeldern das Ereignis KeyUp ab (onkeyup) und starte dort eine Funktion, die prüft, ob entsprechend viele Stellen existieren. Hier könntest Du sogar noch prüfen, ob der bisher eingegebene Wert noch sinnvoll für Tag, Monat, bzw. Jahr ist.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>DatumsFormular</title>
    <script type="text/javascript">
    <!--
    function weiter(ff) {
      if (ff.name=="Tag") {
        if (ff.value.length == 2) ff.form.elements["Monat"].focus();
      } else if (ff.name=="Monat") {
        if (ff.value.length == 2) ff.form.elements["Jahr"].focus();
      } else if (ff.name=="Jahr") {
        if (ff.value.length == 4) ff.form.elements["OK"].focus();
      }
    }
    //-->
    </script>
    </head>
    <body>
    <form action="#" method="POST">
    <p><input type="Text" name="Tag" value="" size="2" maxlength="2" onkeyup="weiter(this);">
    <input type="Text" name="Monat" value="" size="2" maxlength="2" onkeyup="weiter(this);">
    <input type="Text" name="Jahr" value="" size="4" maxlength="4" onkeyup="weiter(this);">
    <input type="Submit" name="OK" value="OK"></p>
    </form>
    </body>
    </html>

    viele Grüße

    Axel

    1. Hallo Axel!

      Prima, das klappt, scheint sich auch nicht an dem anderen Script zu stören!
      Das mit dem Prüfen hab ich nämlich alles schon! (Wollte ich nicht weiter ausführen, ist elend lang!) Fehlte nur noch der Trick mit dem Cursor!

      Vielen, vielen Dank!!!
      Gruß

      Julia

    2. Hallo Axel (und wer vielleicht sonst noch da ist)!

      Das klappt ja so wie du gesagt hast, aber dafür gibt es jetzt ein neues Problem: Man kommt von einer Passwortseite nach der korrekten Eingabe auf die Seite mit dem Formular. Wenn man sich jetzt bei dem Jahr verschreibt und auf die Zurück-Taste drückt, um sich zu verbessern, dann kommt statt dessen wieder die Passwortseite.

      Ich hab nichts verändert, nur dein Script eingefügt!

      Ne Idee, wie das jetzt wieder kommt?

      Gruß
      Julia

      1. Hallo Julia,

        Das klappt ja so wie du gesagt hast, aber dafür gibt es jetzt ein neues Problem: Man kommt von einer Passwortseite nach der korrekten Eingabe auf die Seite mit dem Formular. Wenn man sich jetzt bei dem Jahr verschreibt und auf die Zurück-Taste drückt, um sich zu verbessern, dann kommt statt dessen wieder die Passwortseite.

        Ich hab nichts verändert, nur dein Script eingefügt!

        mea culpa, mea maxima culpa! ;-))

        Ne Idee, wie das jetzt wieder kommt?

        Ja, das kommt dann, wenn dein Cursor nicht mehr im Feld für das Jahr steht, sondern schon auf einem Button oder woanders, weil Du ihn mit focus() dorthin gesetzt hast. Dann bedeutet Backspace History-Back. Du musst den Cursor zum Korrigieren wieder in das Feld setzen, in dem Du korrigieren willst ;-)). Oder lass die Prüfung beim Jahr einfach weg, wenn das das letzte Eingabefeld im Formular ist.

        viele Grüße

        Axel

        1. Hallo!

          Bin ich gerade auch schon draufgekommen :-)
          War ne blöde Frage.

          Hast du zufällig noch ne Idee, wie man verhindern kann, dass bei der Formularüberprüfung das "Bitte füllen Sie das und das Feld aus", wo man OK sagen muss und dann der Focus auf das auzufüllende Feld geht, immer zwei Mal erscheint?

          Das ist in den Scripten bei selfhtml auch ganz oft.

          Gruß
          Julia