✔ Eventhandling

P

phap69

Mitglied
Bitte entschuldigt die Frage eines absoluten Javascript Unkundigen, aber gibt es die Möglichkeit mit Javascriptmitteln ein HTML Formular so zu bearbeiten, dass nach der Eingabe von 2 Zeichen automatisch ins nächste vorhandene Textfeld gesprungen wird und nebenbei die erfolgte Eingabe auch noch geprüft wird.
Konkret möchte ich Zahleneingaben verkürzen und z.B. aus der Eingabe von 22 direkt 2,25 erzeugen und ins nächste Feld springen.
Sollte dies möglich sein, stellt sich natürlich die Frage, wie schwierig dies zu realisieren ist und ob sich für mich eine Einarbeitung in Javascript Kenntnisse rentiert.

Bin für jeden Hinweis äußerst dankbar!
 
Ja, das ist möglich.
Überwache den onKeyup-Event in den Textfeldern.
Jedesmal, wenn er dort "feuert", ermittle die length-Eigenschaft des value des jeweiligen Feldes. Ist diese "2", wurden dort 2 Zeichen eingegeben.
Was genau in dem Textfeld steht, kannst du also per value ermitteln/ändern:

Um dann gegebenenfalls in das nächste Textfeld zu springen, musst du ihm mit der Methode focus() den Fokus geben.

Ob es schwierig ist... ich finde gerade die Manipulation von Formularen ist mit Javascript sehr einfach, weil sie bereits früh in Javascript implementiert war und dadurch in allen Browsern auf dem selben Weg erfolgen kann.

Abgesehen davon halte ich den Umfang mit Formularen für eine im Gegensatz zu vielen anderen JS-Anwendungsmöglichkeiten für ein nützliches Gebiet... also frisch ran ans Werk :-)
 
Ich bin ja ganz begeistert, dass dies zu realisieren ist. Wie gesagt bin ich allerdings was Javascript angeht kein Kenner der Materie. Wäre es möglich mir mal ein kleines Skriptbeispiel zu posten, damit sich deine doch sehr abstrakten Ausführungen etwas klären.

Würde mich riesig freuen
Danke
 
Beispiel:
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function pruefe(feld,next)
{
  //wird in das Feld geclickt, oder keine Zahl eingegeben, 
  //...wird sein Inhalt gelöscht und nichts weiter gemacht
  if(!next || isNaN(parseInt(feld.value)))
    {
        feld.value='';
        return;
    }
    
  //falls eine 2-stellige Zahl eingegeben wurde
  if(feld.value.length>=2)
    {
        //Inhalt des Feldes entsprechend ändern
        //ich weiss nicht genau, was dort bei dir berechnet werden soll...
        //hab mal einfach Eingabe/10 + 0.05 genommen
        feld.value=(Math.round(parseInt(feld.value))+0.5)/10;
        
        //falls man sich nicht im letzten Feld befindet
        if(next!='ende')
            {
                //Wert des nächsten Feldes löschen
                feld.form.elements[next].value='';
                
                //ins nächste Feld "springen"
                feld.form.elements[next].focus();
            }
    }
}
//-->
</script>
</head>
<body>
<form>
<input type="text"name="feld1"size="20"onclick="pruefe(this,false)"onkeyup="pruefe(this,'feld2')">
<input type="text"name="feld2"size="20"onclick="pruefe(this,false)"onkeyup="pruefe(this,'feld3')">
<input type="text"name="feld3"size="20"onclick="pruefe(this,false)"onkeyup="pruefe(this,'feld4')">
<input type="text"name="feld4"size="20"onclick="pruefe(this,false)"onkeyup="pruefe(this,'ende')">
</form>
</body>
</html>
In den Feldern wird jeweils bei onclick(Hineinklicken) und onkeyup(Aufwärtsbewegung einer Taste) die Funktion pruefe() aufgerufen.
Dieser werden 2 Parameter übergeben.
Der erste ist immer "this"... das ist ein Zeiger auf das auslösende Element(also hier das Eingabefeld selbst)
Der zweite ist beim "onclick" immer false, bei "onkeyup" jeweils der Name des nächsten Feldes(beim letzten Feld nicht... da 'ende')

Anhand dieser Parameter kann die Funktion nun entscheiden, was zu tun ist(Details dazu stehen in der Funktion).

Wie die Dinge im Einzelnen arbeiten, kannst du bei SelfHTML erfahren.
In diesem Fall sind da der Abschnitte forms von besonderem Interesse.
 
Super, vielen Dank für die ausführliche Antwort. Hat mir sehr vile geholfen, auch ein paar Grundlagen von JavaScript, die ich mir versucht habe in aller Kürze anzulesen zu verstehen.
Eine Schwierigkeit habe ich noch zu überwinden gehabt und vielleicht ist auch für andere von Interesse.
Habe meine Textfeldnamen innerhalb eines PHP-Skripts mit Nummern bezeichnet, was in der Variablenübergabe tadellos funktioniert. Mit der focus()-Funktion funktionierte dies allerdings nicht, d.h. der Versuch in das nächste Textfeld zu springen lieferte "Fehler auf dieser Seite"!
 
phap69 hat gesagt.:
Habe meine Textfeldnamen innerhalb eines PHP-Skripts mit Nummern bezeichnet
Zum Vergrößern anklicken....

Wenn die Namen wirklich nur aus Ziffern bestehen.... das ist lt. in Javascript ansich nicht erlaubt(der Name muss dort mit einem Buchstaben beginnen).

Das wäre noch nicht unbedingt das Problem(nur weil es nicht erlaubt ist, heisst es noch nicht, dass es nicht funktioniert:-)).

Der Fehler dürfte darin liegen:
mit document.formularname.elements ist ein Array verfügbar, welcher alle Elemente des jeweiligen Formulars enthält.
Dieser Array ist sowohl assoziativ, als auch numerisch.
Wenn die Namen aus Zahlen bestehen, greift JS auf die numerischen Schlüssel zu...
mit document.formularname.elements[2] z.B. nicht auf das Feld mit dem Namen "2", sondern auf das dritte Element im Formular.
Der aufgetretene Fehler wird daraus resultieren, dass das angesprochene Feld nicht existiert oder nicht in der Lage ist, den Fokus zu erhalten.
 
Die Erklärung klingt plausibel, denn in einer Testversion habe ich tatsächlich beobachtet, dass mit dem focus() automatisch zwei Felder weiter gesprungen wurde. Allerdings habe ich ungefähr 25-30 Felder, so dass die Wahrscheinlichkeit recht groß ist, dass das jeweils übernächste Feld besteht (zumindes zu Beginn der Eingabe!)

Letzte Frage:
Wie kann ich diesen Thread als erledigt kennzeichnen? Entschuldigt meine Blindheit ;-)
 
Du kannst als Feldnamen auch Konstrukte mit Klammern verwenden: name="feldname[1]"

Das ist zwar strenggenommen auch nicht erlaubt, JS kommt damit aber klar.
In PHP kannst du dann auf feldname als Array zugreifen.


Erledigen: ganz unten findest du einen Button:Status:nicht erledigt
da raufklicken
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück