mit Return auf das andere Input-Feld springen

B

bergamo

Grünschnabel
Hallo,

möchte bei einem Formular mit Return auf das nächste Eingabefeld springen und nicht das Formular senden.

Wie kann man das mir JS realisieren?

Danke im voraus.

Gruss
 
Wow... so eine kleine Frage, hat mir jetzt doch ziemlich Kopfzerbrechen bereitet. Gleich vorweg - es geht - es ist nur die Frage ob es nicht auch einfacher geht. Mein Skript ist jetzt doch ziemlich umfangreich geworden...

Code: 
<html>
<head>
    <script type="text/javascript">
      
      var bSubmitted = false;
      
      function check(){
        if(bSubmitted){
          return true;
        }else{
          return false;
        }
      }
      
      
      function getKeyCode(evt){
        if(navigator.appName == "Netscape"){
          var iKeyCode = evt.which;
          return iKeyCode;
        }else if(navigator.appName == "Microsoft Internet Explorer"){
          var iKeyCode = window.event.keyCode;
          return iKeyCode;
        }else{
          return false;
        }
      }
      
      
      function getNextElement(oElement){
        var iElements = oElement.form.length;
        for(x=0;x<iElements;x++){
          if(oElement.form.elements[x].name == oElement.name){
            break;
          }
        }
        return ++x;
      }
      
      
      function next(oElement, evt){
        var iKeyCode = getKeyCode(evt);
        if(iKeyCode==13){
          var iNext = getNextElement(oElement);
          var oForm = oElement.form;
          oForm.elements[iNext].focus();
          if(iNext==oForm.length-1){
            bSubmitted = true;
            return true;
          }else{
            return false;
          }
        }
      }
    </script>
</head>
<body>
<form name="test" onsubmit="return check()">
    <input type="text" name="one" onkeydown="return next(this, event)"><br>
    <input type="text" name="two" onkeydown="return next(this, event)"><br>
    <input type="text" name="three" onkeydown="return next(this, event)"><br>
    <input type="text" name="four" onkeydown="return next(this, event)"><br>
    <input type="text" name="five" onkeydown="return next(this, event)"><br>
    <input type="submit">
</form>
</body>
</html>
Manche Sachen gehen nicht - das liegt aber an Javascript allgemein, da einige Elemente keine "Onkeydown" Events verarbeiten können...

Hoffe du kannst damit was anfangen.

ciao
 
Ich hab mich auch mal rangesetzt, und rausgekommen ist das hier:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
		<title>Weiter mit Return</title>

		<script type="text/javascript">
		var sActive, bSubmit = false;

		function goOn( a_sFormName )
		{
			if (sActive != "submit") {
	            iNewId = getNextElement( a_sFormName, sActive );
	            if (iNewId != false) {
	                window.document[a_sFormName].elements[iNewId].focus();
	                return false;
	            } else {
	                alert("Am letzen Feld angekommen");
	                return true;
	            }
			} else {
				alert("Submit-Button gedrückt. Formular wird abgeschickt");
			}
		}

		function sendForm( a_sFormName )
		{
			window.document[a_sFormName].submit();
        	return false;
		}

        function getNextElement( a_sFormName, a_sElementName )
		{
        	var iElements = window.document[a_sFormName].elements.length;
        	for(i=0; i<iElements; i++) {
				if ( (window.document[a_sFormName].elements[i].name == a_sElementName) &&
				     (window.document[a_sFormName].elements[i].type == "text" )) {
					if ( (i < (iElements - 1)) &&
					     (window.document[a_sFormName].elements[i+1].type == "text")) {
	                    return i + 1;
					}
				}
        	}
        	return false;
      	}

		function markInputs()
		{
        	aInputs = window.document.getElementsByTagName("input");
			for (i=0; i<aInputs.length; i++) {
				if (aInputs[i].type == "text") {
					window.document.getElementsByTagName("input")[i].onfocus
					  = new Function("sActive=this.name;");
				} else if (aInputs[i].type == "submit") {
					window.document.getElementsByTagName("input")[i].onfocus
					  = new Function("sActive='submit';");
				}
			}
		}
		</script>
	</head>
	<body onLoad="markInputs();">
		<h2>Markiere das erste Feld und drücke Enter um weiter zu kommen</h2>
		<form name="oForm" action="datei.php" onSubmit="return goOn(this.name);">
			<input type="text" name="oIrgendwas" style="width:150px;">
			<br>
			<input type="text" name="oHund" style="width:150px;">
			<br>
			<input type="text" name="oKatze" style="width:150px;">
			<br>
			<input type="text" name="oFisch" style="width:150px;">
			<br>
			<br>
			<input type="submit" value=" Abschicken ">
		</form>
	</body>
</html>
Was dir besser gefällt, musst du entscheiden.
 
Hallo,

kam man den Code von Andreas so anpassen, das nur bestimmte Felder angesprungen bzw. bestimmte übersprungen werden? Also alle Felder die z.Bsp. mit "a" beginnen. So könnte man zwischen Pflichtfeldern und Optionalen trennen.

Danke, Mario
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück