Formular Navigation Focus usw.

XeN

Mitglied
Hallo,

erst einmal dickes Sorry für den Titel. Aber mir viel es was schwer das am Besten zu Formulieren da es verschiedene dinge sind.

Vielleicht poste ich erst einmal den Code der Seite.

Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
<title>Unbenanntes Dokument</title>

<script type='text/javascript'>

var d = document,  IE = d.all && !window.opera;

onload = function(){ for( var i = 0, f; i < ( f = d.forms ).length; i++ )
                      for( var j = 0, e; j < ( e = f[i].elements ).length; j++ )
                       { e[j].z = j;
									
                          { e[j].onkeydown =
                            function(o)
                            { var f = this.form,  e = f.elements, z = this.z + 1;
                            	
                              /*
                              Unterbindet das Submit durch die Enter Taste und springt durch drücken der Enter und Downarrow Taste
                              ins nächste Feld. 
                              Nach dem letzten Feld wird wieder in das erste Feld gesprungen
                              */
                              if( ( IE ? event.keyCode : o.which ) == 13 || ( IE ? event.keyCode : o.which ) == 40 )
                               { 
                               	
                               	if( e[z] )
                                  { 
                                  	                             
	                                 xx = this.z + 1;
                               		if ( this.form.elements[xx].type == 'submit' )
                               		 {
                               			zz = xx + 1;
                               			alert(zz);
                               			e[zz].focus();
                               			f.onsubmit = function(){ return false };
                               		 }else{
                               			e[xx].focus();
                               			f.onsubmit = function(){ return false };
                               		 };
	                                  
                                  }else{
                                  	this.form.elements[0].focus();
                                 	f.onsubmit = function(){ return false };
                                 };
                                if ( this.form.elements[z].type == 'submit' ) 
                                {
                                	e[z].focus();
                                	f.onsubmit = function(){ return false };
                                };
                               };
                               
                               //F9 schickt das Formular ab
                               if( ( IE ? event.keyCode : o.which ) == 120 )
                               { 
                               	this.form.submit();
                               };
                               
                               //F12 Resetet das Formular und Springt ins erste eingabefeld
                               if( ( IE ? event.keyCode : o.which ) == 123  )
                               { 
                               	if (confirm("ACHTUNG: alle Inhalte werden unwiederruflich geloescht!"))
											 { 
											 	this.form.reset();
                               		this.form.elements[0].focus();
											 }
                               };

                               //Pfeiltaste Up springt ein feld hoch
                               if( ( IE ? event.keyCode : o.which ) == 38 )
                               { 
                               	xx = this.z - 1;
                               	if ( this.form.elements[xx].type == 'submit' )
                               	{
                               		zz = xx - 1;
                               		e[zz].focus();
                               	}else{
                               		e[xx].focus();
                               	};
                               };
                               
                            };

                            e[j].onkeyup   =
                            function()
                            { this.form.onsubmit = function(){ return true }; };
                          };
                       };
                   };
</script>

</head>

<body>

<form action='#' method='get' name='mainForm'>
<input type='text' name='a' /><br />
<input type='text' name='x' /><br />
<input type='text' name='b' /><br />
<input type='text' name='d' /><br />
<input type='text' name='e' /><br />
<input type='text' name='f' /><br />

<input type='text' name='aa' /><br />

<input type='submit' value='Abschicken' /><br />

<input type='text' name='bb' /><br />
</form>

</body>
</html>

Dazu sei gesagt das ich nicht wirklich gut bis gar nicht javascript kann.

Zur Erklärung, in unserer Firma setzen wir ein Linux Basierendes Warenwirtschaftssystem ein. In diesem navigiert man mit den Pfeiltasten. Escape/Abbrechen ist F12 und Speichern F9.
Da wir Planen eine Neue Warenwirtschaft zu schreiben welche auf HTML und Python basiert möchten wir auch gerne versuchen dem User den Umstieg so leicht wie möglich zu gestalten.

Ich weiß das es im allgemeinen Blöd ist das Submit des Form's per Enter zu unterbinden. Aber die Software ist nur Betriebsintern und ich denke da ist das OK.

Eigentlich funktioniert alles bestens. Wenn man das letzte Feld anspringt geht's im ersten weiter. Speichern mit F9 Reset mit F12.
Nächstes Feld mit Enter und Pfeil runter, vorheriges Feld mit Pfeil rauf.

Das Problem ist nur das ich noch gerne möchte das er den Submit Button Überspringt. Wenn ich im letzten Feld bin und Pfeil hoch mache, dann macht er das auch. Nur wenn ich in dem Feld vor dem Button bin, dann macht er das nicht.

Hat da jemand einen Tip für mich?
 
Nur wenn ich in dem Feld vor dem Button bin, dann macht er das nicht.

Er macht es schon, es geht nur zu schnell und du siehst es nicht :suspekt:

Danach läuft deine Funktion nämlich hier durch:
Code:
if ( this.form.elements[z].type == 'submit' ) 
  {
    e[z].focus();
    f.onsubmit = function(){ return false };
  };
....und gibt dem Button den Fokus.
 

Neue Beiträge

Zurück