[JavaScript+onKeyUp] Ereignis tritt im falschen Feld auf

Quidoff · 26. März 2007

Hallo,
ich schreibe gerade einen Abi-Rechner für die Schule. Es sollen die Punkte eingegeben werden und daraus der Abi-Schnitt berechnet werden.
Ich hänge dabei an einem kleinen Detail:
Beim Eingeben der Punkte soll man automatisch ins nächste Feld kommen, sobald man im aktuellen Feld eine Punktzahl eingetragen hat. Das funktioniert auch ganz gut, bis auf eine kleine Feinheit.
Schaut euch hierzu am besten diese Beispiel-Page an.

Geht jetzt ins Feld "Deutsch", markiert die "13" und gebt ganz schnell nacheinander "1" und "4" ein (nur als Beispiel, ihr könnt auch eine andere Zahl zwischen 10 und 15 nehmen). In dem Feld unten gebe ich die Namen der Felder aus, bei denen das onkeyup-Event ausgelöst wird. Wie ihr seht ist das erste Ereignis im Feld "Deutsch", das Zweite aber ist im Feld "Mathe". Dadurch, dass im Feld "Mathe" schon eine Punktzahl steht, wird wieder zum nächsten Feld gegangen, wodurch man unglücklicherweise direkt von "Deutsch" zu "Englisch" kommt und das Feld "Mathe" überspringt.
Da bereits nach dem ersten onkeypress-Ereignis die Punktzahlbedingung erfüllt ist, wird das zweite onkeypress-Ereignis im nächsten Feld ausgeführt, da durch das erste onkeypress-Ereignis der Fokus zum nächsten Feld wandert.

Wie löst man diese Kleinigkeit am einfachsten?
Mfg
Quidoff

Cobinja · 26. März 2007

Äh, vielleicht war ich zuuuuu schnell mit den Fingern. Bei mir (Firefox 2.0.0.3) tritt das Ereignis zweimal im Feld "deutsch" auf und ich komme zu Mathe...

Abgesehen davon wäre wahrscheinlich eher günstig, den Benutzer entscheiden zu lassen, wann er ins nächste Feld gehen will und erst beim Verlassen eines Feldes die Gültigkeit zu prüfen (ich weiss jetzt grade nicht, ob so etwas wie OnLeave in JavaScript gibt).

Alles andere würde manchen User einfach verwirren, weil die meisten es gweohnt sind, entweder mit der Maus oder mit Tab ins nächste Feld zu springen

Quidoff · 28. März 2007

Also in meinem FF 2.0.0.3 trat das Problem auch auf. Ich habe das jetzt so gelöst, dass beim Verlassen des Feldes (onblur()) geprüft wird, ob es sich um eine korrekte Punktzahl handelt. Falls nicht, so wird der Inhalt des Felds einfach gelöscht, aber der Fokus geht trotzdem ins nächste Feld.
Erst wollte ich es so machen, dass der Fokus vom unteren Feld wieder in das obere Feld zurückgeht, aber da hab ich eine Endlosschleife bekommen, weil beim Verlassen des unteren Felds auch onblur() aufgerufen wird und dieses dann wieder in das untere Feld springen will. Dadurch wird wieder onblur() des oberen Feldes aufgerufen usw...

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>onkeyup-Frage</title>
</head>

<body>
<form action="" method="get">
	Deutsch: <input name="deutsch" type="text" value="13" /><br/>
	Mathe: <input name="mathe" type="text" value="12" /><br/>
	Englisch: <input name="englisch" type="text" value="11" /><br/><br/>
	<input name="dummy" size="100" type="text" />
</form>

<script type="text/javascript">
<!--
	var inputs = document.getElementsByTagName('form')[0].getElementsByTagName('input');

	for(var i=0; i < inputs.length; i++) {
		var input = inputs[i];
		if(input.type=="text") {					
			input.onblur = function() {
				if(this.value.length>2 || parseInt(this.value)>15 || parseInt(this.value)<0 || parseInt(this.value)!=this.value) {
					this.value='';
				}
			}
		}
	}
//-->
</script>
</body>
</html>

Suche

[JavaScript+onKeyUp] Ereignis tritt im falschen Feld auf

Quidoff

Lieutenant

Cobinja

Lt. Junior Grade

Quidoff

Lieutenant