kostenloser Webspace werbefrei: lima-city

JS: Automatisch zum nächsten Feld springen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

bereich browser buchstabe code cursor feld funktion ignorieren inhalt input jemand pfeil pfeiltaste position problem run start tastatur taste wechsel
  1. Autor dieses Themas

    things

    things hat kostenlosen Webspace.

    22:22, 22.4.2011
    Hallo zusammen!

    Ich habe ein kleines Projekt: ein (Zauber-)Spruchgenerator. Der orientiert sich an verschiedenen Vorlagen. Der Benutzer soll nun die verschiedenen Versionen nutzen können, indem er Input-Felder benutzt. Dabei steht in jedem Feld schon die Silbe der Vorlage, dies soll überschrieben werden.
    Jedes Feld beinhaltet zwischen ein und vier Buchstaben. Gibt man seine gewünschte Silbe ein und hat die Maximallänge des Inputs erreicht, soll der Fokus auf dem nächsten Feld liegen und der Inhalt überschreibbar sein.

    Ich war sehr froh, als es schließlich geklappt hat - im Firefox. Als ich nun zum Abschlusscheck auch den IE bemüht habe, wurde ich herb enttäuscht, da dort springt der Fokus nicht in das nächste Feld.

    Ich wäre sehr froh, wenn mir jemand helfen könnte, dass auch im IE der Fokus auf das nächste Feld springt, wenn der Cursor auf der maximalen Feldlänge steht.

    Hier meine Codes:
    HTML
    <div class="zweiteversion" style="display:block; overflow:hidden; padding-bottom:10px">
<div style="float:left; padding-right:20px;"><b>Version 2</b></div>
<div style="float:left;">
<form name="muster2" action="<?php echo($_SERVER["PHP_SELF"]) ?>" method="post"> 
    <input id="e01" name="es3" value="Pi" class="gleich2" onkeyup="aktualisieren(this)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input id="e02" type="text" name="es2" value="li" class="gleich3" onkeyup="aktualisieren(this)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" />
    <input id="e03" name="es3" value="Pi" class="gleich2 neueswort" onkeyup="aktualisieren(this)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input id="e04" name="es2" value="li" class="gleich3" onkeyup="aktualisieren(this)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input id="e05" name="es1" value="Po" class="gleich4 neueswort" onkeyup="aktualisieren(this)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input id="e06" name="es5" value="pa" class="gleich5" onkeyup="aktualisieren(this)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input id="e07" name="es4" value="lu" class="gleich1" onkeyup="aktualisieren(this)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input id="e08" name="1" value="ra" onkeyup="aktualisieren(this)" maxlength="2" type="text" />
    <input id="e09" name="es1" value="Po" class="gleich4 neueswort" onkeyup="aktualisieren(this)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input id="e10" name="es5"  value="pa" class="gleich5" onkeyup="aktualisieren(this)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input id="e11" name="es4" value="lu" class="gleich1" onkeyup="aktualisieren(this)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input id="e12" type="submit" value="Absenden" name="muster2" style="width:80px; margin-left:30px;" />
</form>
<?php
if(isset($_POST["muster2"])) {
	$a = $_POST["es3"];
	$b = $_POST["es2"];
//	$c = $_POST["es3"];
//	$d = $_POST["es2"];
	$e = $_POST["es1"];
	$f = $_POST["es5"];
	$g = $_POST["es4"];
	$h = $_POST["1"];
//	$i = $_POST["es1"];
//	$j = $_POST["es5"];
//	$k = $_POST["es4"];
	echo('<p>' . $a . $b . ' ' . $a . $b . ' ' . $e . $f . $g . $h . ' ' . $e . $f . $g . '</p>');
}
?></div>
</div>


    Skriptdatei 1
    //legt die Ausgangsposition auf 0 fest
var inputstart = 0;
//var inputstart = input.value.length;

function aktualisieren(input) {
	//Inputinhalt in text speichern
	var value = input.value;
	//Variabel start mit Zahl (CursorPos) füllen
	var start = auswahltreffen(input);
	//wenn keine Pos, dann wie vorher
	if (start == inputstart) {
		return;
	}
	//der Inputinhalt wird vor der Cursorstelle abgeschnitten 
	var hintercursor = value.substring(start);
	vergleichen(start, hintercursor, input.id);
}

//gibt Zahl zurück
//gibt die Position des Cursors zurück
function auswahltreffen(input) {
	//TextRange um den Cursorstand auszulesen
	if (input.createTextRange) {
		var bereich = document.selection.createRange().duplicate();
		bereich.moveStart('character');
		//wenn bereich keinen Inhalt hat, dann wird die Länge des Values zurückgegeben
		if (bereich.text == '') {
			return 0;
		}
		return 0;
	}
	else {
		return input.selectionStart;
	}
}

function vergleichen(cursorpunkt, hintercursor, id) {
	var maxlange = document.getElementById(id).maxLength;
	if(maxlange == cursorpunkt && hintercursor == "") {
		//für IDs nach dem Muster xxxx00
		var nachstezahl = id.substring(1);
		nachstezahl = parseFloat(nachstezahl) + 1;
		if(nachstezahl < 10) {
			nachstezahl = "0" + nachstezahl;
		}
		else { nachstezahl = "" + nachstezahl; }
		var id2 = id.substring(0,1) + nachstezahl;
		//wenn es ein Element mit der neuen ID gibt
		if(document.getElementById(id2) != null) {
			document.getElementById(id2).focus();
			document.getElementById(id2).select();
		}
	}
	else {
		document.getElementById("ausgabe").innerHTML = '';
	}
}


    Skriptdatei 2
    // JavaScript Document

var position;
var zeichenanzahl;
var silbenarray;
var muster;

//wird beim Heben einer Taste aktiviert
function weiterspringen(inputfeld){
	//wenn eine Pfeiltaste gedrückt wird, BREAK;
	try {
		//wenn es ein Event-Objekt gibt (im IE)
		if(event){
			 document.getElementById("ausgabe").innerHTML += event.keyCode;
			 //wenn Pfeiltasten gedrückt werden
			 if(37 <= event.keyCode && event.keyCode <= 40) {
				 //zurückspringen und die Funktion verlassen
				 return;
				 document.getElementById("ausgabe").innerHTML += "OI";
			 }
		}
	}
	//für Firefox
	catch(ereignis) {
		//Variabel für eine Pfeiltaste
		var pfeiltaste = false;
/*
//soll: wenn Taste gedrückt, dann weiter in der Funk; WENN PFEILTASTE, gedrückt: funktion abbrechen
		function tastendruck (ereignis) {
			if (!ereignis) {
				ereignis = window.event;
			}
		//	var key = ereignis.keyCode || ereignis.which;
		//	alert(key);
			var aktuelletaste = ereignis.keyCode || ereignis.which;
		
			 if(37 <= aktuelletaste && aktuelletaste <= 40) {
				 //zurückspringen und die Funktion verlassen			 
				 document.getElementById("ausgabe").innerHTML += "Pfeiltaste! ";
				 var pfeiltaste = true;
			 }
		}	
*/
		
		
		
	//	document.onkeyup = tastendruck;	
		document.getElementById("ausgabe").innerHTML += "PFeil: " + pfeiltaste + "<br />";
		if(pfeiltaste == true) {
			 document.getElementById("ausgabe").innerHTML += " ~~~~ PFeiltaste ist true ~~~~<br />";
		}
	}
	
	//wenn die Maximallänge erreicht ist
	if(inputfeld.value.length == inputfeld.maxLength) {
		//ZielID definieren
		var buchstabe = inputfeld.id.substr(0, 1)
		var alteID = parseInt(inputfeld.id.substr(1));
		var neueID = alteID + 1;
		if(neueID <= 9) {
			var zielID = buchstabe + "0" + neueID;
		}
		else { var zielID = buchstabe + neueID; }
		//Focus setzen
		document.getElementById(zielID).focus();
		document.getElementById(zielID).selectionStart = 0;
	}
}

function silbendublizieren(position, value) {
//für alle = gleiche Felder mit dem Inhalt füllen
	silbenarray = document.getElementsByName(position);
	for(var i = 0; i < silbenarray.length; i++) {
		silbenarray[i].value = value;
	}
//xx0 zu xx0a: falls es Felder gibt, die den ersten Buchstaben dieses Feldes brauchen
	var ersterbuchstabe = value.charAt(0);
	//Felder finden, die davon abhängen
	var abuchstabefeld = position + "a";
	var afelder = document.getElementsByName(abuchstabefeld);
	if(afelder.length != 0) {
		for(var i = 0; i < afelder.length; i++) {
			//altes Value des Feldes xx0a und festlegen des neuen Feldes
			var altesvalue = afelder[i].value.slice(1,2);
			afelder[i].value = ersterbuchstabe + altesvalue;
		}
	}	
//xx0a zu xx0: den ersten Buchstaben an xx0 weitergeben
	if(position.charAt(3) == "a") {
		//Name der Zielinputs
		var baseinputvona = position.slice(0,3);
		//Zielinputs in ein Array
		silbenarray = document.getElementsByName(baseinputvona);
		for(var i = 0; i < silbenarray.length; i++) {
			//altes Value auslesen & den ersten Buchstaben entfernen
			var altesvalue = silbenarray[i].value;
			altesvalue = altesvalue.slice(1,2);
			//erster Buchstabe des eigenen Values
			value = value.charAt(0);
			//neuer erster Buchstabe + altes Value
			silbenarray[i].value = value + altesvalue;
		}
	}
//xx0x9z: wenn an der 5. Stelle ein z steht, wird der letzte Buchstabe von xx9 hier letzter Buchstabe
	if(position.charAt(5) == "z") {
		//den Inhalt von xx9 ermitteln
		var baseinputvonz = position.slice(0,2) + position.charAt(4,5);
		var ausgangsvalue = document.getElementsByName(baseinputvonz)[0].value;
		//den letzten Buchstaben auslesen
		var letzterbuchstabe = ausgangsvalue.charAt(ausgangsvalue.length - 1);
		//den Buchstaben als letzten Buchstaben von xx0x9z definieren
		var obergrenze = value.length - 1;
		if(obergrenze < 1) {obergrenze = 1; }
		var erstvalue = value.slice(0, obergrenze);
		//alle diese Felder mit dem neuen Inhalt füllen
		silbenarray = document.getElementsByName(position);
		for(var i = 0; i < silbenarray.length; i++) {
			silbenarray[i].value = erstvalue + letzterbuchstabe;
		}
	}
}


    Es ist schon länger her, dass ich mich intensiv mit dem Code beschäftigt habe, aber ich versuche gerade, die Schnipsel, die ich mir zusammengesucht habe, wieder vollständig zu verstehen... @__@

    Vielleicht kann mir jemand einen Wink geben, wo ich die Lösung meines Fehlers finde. :)

    Ich würde mich sehr freuen!

    Liebe Grüße
    things

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. limabone

    Kostenloser Webspace von limabone

    limabone hat kostenlosen Webspace.

    18:39, 23.4.2011
    Es ginge auch einfacher ( und für alle browser )
    <input type="text" onKeyUp="if(this.value.length==4) { document.getElementById("nextinput").focus(); }" />

    Das musst du dann eben bei allen input Feldern machen ;)
    Hoffe ich konnte helfen :biggrin:

  4. galaktica

    Kostenloser Webspace von galaktica

    galaktica hat kostenlosen Webspace.

    19:37, 23.4.2011
    Stelle mal eine Testpage online, so kann man nur raten.

    Ansonsten empfehle ich noch google.


    Mfg

  5. kostenlose-javascripts

    Kostenloser Webspace von kostenlose-javascripts

    kostenlose-javascripts hat kostenlosen Webspace.

    19:49, 23.4.2011
    Da der IE nicht den besten Ruf hat, benutzt ihn sowieso fast kein Mensch. Die meisten Seiten werden
    nicht vom IE unterstützt. Du kannst ja eine javascriptabfrage machen und falls jemand mit dem IE vorbeisurft erscheint eine Meldung er möge bitte den Browser wechseln.

  6. m**********n

    20:02, 23.4.2011
    kostenlose-javascripts schrieb:
    Da der IE nicht den besten Ruf hat, benutzt ihn sowieso fast kein Mensch. Die meisten Seiten werden
    nicht vom IE unterstützt. Du kannst ja eine javascriptabfrage machen und falls jemand mit dem IE vorbeisurft erscheint eine Meldung er möge bitte den Browser wechseln.


    Den benutzt kein Mesch? Das wäre mir neu...

    Also: Ungefähr alle Leute auf der Welt die den PC nur zum Surfen und verwalten von Dokumenten geht benutzen meistens IE, wenn sie nicht viel Ahnung vom Computer haben. Außedem ist in den meisten Firmen der IE Standardbrowser, den du nicht verändern kannst.
  7. Autor dieses Themas

    things

    things hat kostenlosen Webspace.

    0:26, 24.4.2011
    Hallo!

    limabone schrieb:
    Es ginge auch einfacher ( und für alle browser )
    <input type="text" onKeyUp="if(this.value.length==4) { document.getElementById("nextinput").focus(); }" />

    Das musst du dann eben bei allen input Feldern machen ;)
    Hoffe ich konnte helfen :biggrin:

    Sorry, limabone, aber das geht nicht - so wird ja immer, wenn eine Taste in dem voll ausgefüllten Feld gedrückt wird, zum nächsten gesprungen. Ich möchte aber die Möglichkeit haben, im Nachhinein mit den Pfeiltasten auch noch durch die Eingabe zu navigiernen.

    @galaktica
    Ja, gut - wobei der Code komplett ist. Klick mich! :)
    Goggle kenn und liebe ich, aber es hat mir in den letzten Monaten bei dem Projekt nicht über diese Schwele geholfen o~o

    kostenlose-javascripts schrieb:
    Da der IE nicht den besten Ruf hat, benutzt ihn sowieso fast kein Mensch. Die meisten Seiten werden
    nicht vom IE unterstützt. Du kannst ja eine javascriptabfrage machen und falls jemand mit dem IE vorbeisurft erscheint eine Meldung er möge bitte den Browser wechseln.

    Ich hoffe, das war ein Witz, kostenlose-javascripts. Der IE ist immernoch der weitverbreiteste Browser weltweit und den IE6 gibts auch noch zu nem bemerkenswerten Prozentsatz. Den IE zu ignorieren kommt so gar nicht in Frage und von der Usability her ist das Selbstmord, einen anderen Browser zu verlangen! *s*
    Außerdem MUSS es ja gehen können! xD

    Ich hoffe, der Online-Code hilft weiter :)

    Grüße
    things

  8. fabo

    fabo hat kostenlosen Webspace.

    1:30, 24.4.2011 
    <!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>
<title>Deepness of Soul</title>
<script type="text/javascript" src="zauberspruchhilfe.js"></script>
<script type="text/javascript">
//<![CDATA[
function nextField(elmnt,content){
	if (content.length == elmnt.maxLength) {
		id = elmnt.id;
		nextNum = parseInt(id.match(/\d+$/), 10)+1;
		firstLetter = id.substring(0, 1);
		
		if(nextNum < 10) {
			nextNum = '0' + nextNum;
		}

		nextID = firstLetter + nextNum;
		if(document.getElementById(nextID) !== null) {
			document.getElementById(nextID).focus();
		}
	}
}
//]]>
</script>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div class="inhalt">
	<table style="border-width:0px;">
	<tr>
		<td width="45%">
			Die Zauberspr&uuml;che der Hexen in der Serie lauten wie folgt:<br/>
			<b>Version 1:</b> Pe-<font color="#A5CAE4">r</font>e-<font color="#A5CAE4">ka</font>-<font color="#A5CAE4">l</font>a P<font color="#A5CAE4">a</font>-<font color="#A5CAE4">po</font>-<font color="#A5CAE4">ri</font>-<font color="#A5CAE4">n</font>a Pe-<font color="#A5CAE4">k</font>e-la-to Pe-<font color="#A5CAE4">p</font>e-la-to<br/>
			<b>Version 2:</b> Pil-li Pil-li Po-pa-lu-<font color="#A5CAE4">ra</font> Po-pa-lu<br/>
			<b>Version 3:</b> Pa-<font color="#A5CAE4">me</font>-<font color="#A5CAE4">k</font>i-la-<font color="#A5CAE4">k</font> La-li-l<font color="#A5CAE4">o</font>-<font color="#A5CAE4">r</font>i Pa-<font color="#A5CAE4">lou</font><br/>
			<b>Version 4:</b> Pu-<font color="#A5CAE4">ru</font>-run Pu-run Fa-mi Fa-mi Fa<br/>
			<b>Version 5:</b> Pi-pi-to P<font color="#A5CAE4">u</font>-<font color="#A5CAE4">ri</font>-to Pe-pe-<font color="#A5CAE4">ru</font>-to / Pi-to Po-li-to Pu-ri-tan Pe-per-to
		</td>
	</tr>
	</table>
	<br/>
	<div class="ersteversion" style="display:block; overflow:hidden; padding-bottom:10px;">
		<div style="float:left; padding-right:20px;">
			<b>Version 1</b>
		</div>
		<div style="float:left;">
			<form name="muster1" action="/javascript/index.php" method="post">
				<input id="d01" name="ds1" value="Pe" class="gleich1" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="d02" name="1" value="r" class="buchstabe buchstabe1" onkeyup="nextField(this,this.value)" maxlength="1" type="text"/>
				<input id="d03" name="ds2" value="e" class="buchstabe gleich2" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="d04" name="2" value="ka" onkeyup="nextField(this,this.value)" maxlength="2" type="text"/>
				<input id="d05" name="3" value="l" class="buchstabe buchstabe1" onkeyup="nextField(this,this.value)" maxlength="1" type="text"/>
				<input id="d06" name="ds3" value="a" class="buchstabe gleich3" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="d07" name="ds1a" value="P" class="buchstabe ahnlich1 neueswort buchstabe1" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="d08" name="4" value="a" class="buchstabe" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="d09" name="5" value="po" onkeyup="nextField(this,this.value)" maxlength="2" type="text"/>
				<input id="d10" name="6" value="ri" onkeyup="nextField(this,this.value)" maxlength="2" type="text"/>
				<input id="d11" name="7" value="n" class="buchstabe buchstabe1" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="d12" name="ds3" value="a" class="buchstabe gleich3" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="d13" name="ds1" value="Pe" class="gleich1 neueswort" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="d14" name="8" value="k" class="buchstabe buchstabe1" onkeyup="nextField(this,this.value)" maxlength="1" type="text"/>
				<input id="d15" name="ds2" value="e" class="buchstabe gleich2" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="d16" name="ds4" value="la" class="gleich4" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="d17" name="ds5" value="to" class="gleich5" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="d18" name="ds1" value="Pe" class="gleich1 neueswort" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="d19" name="9" value="p" class="buchstabe buchstabe1" onkeyup="nextField(this,this.value)" maxlength="1" type="text"/>
				<input id="d20" name="ds2" value="e" class="buchstabe gleich2" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="d21" name="ds4" value="la" class="gleich4" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="d22" name="ds5" value="to" class="gleich5" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="d23" type="submit" value="Absenden" name="muster1" style="width:80px; margin-left:30px;"/>
		</div>
	</div>
	<div class="zweiteversion" style="display:block; overflow:hidden; padding-bottom:10px">
		<div style="float:left; padding-right:20px;">
			<b>Version 2</b>
		</div>
		<div style="float:left;">
			<form name="muster2" action="/javascript/index.php" method="post">
				<input id="e01" name="es3" value="Pi" class="gleich2" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="e02" type="text" name="es2" value="li" class="gleich3" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2"/>
				<input id="e03" name="es3" value="Pi" class="gleich2 neueswort" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="e04" name="es2" value="li" class="gleich3" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="e05" name="es1" value="Po" class="gleich4 neueswort" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="e06" name="es5" value="pa" class="gleich5" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="e07" name="es4" value="lu" class="gleich1" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="e08" name="1" value="ra" onkeyup="nextField(this,this.value)" maxlength="2" type="text"/>
				<input id="e09" name="es1" value="Po" class="gleich4 neueswort" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="e10" name="es5" value="pa" class="gleich5" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="e11" name="es4" value="lu" class="gleich1" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="e12" type="submit" value="Absenden" name="muster2" style="width:80px; margin-left:30px;"/>
			</form>
		</div>
	</div>
	<div class="dritteversion" style="display:block; overflow:hidden; padding-bottom:10px">
		<div style="float:left; padding-right:20px;">
			<b>Version 3</b>
		</div>
		<div style="float:left;">
			<form name="muster3" action="/javascript/index.php" method="post">
				<input id="s01" name="ss1" value="Pa" class="gleich3" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="s02" name="1" value="me" onkeyup="nextField(this,this.value)" maxlength="2" type="text"/>
				<input id="s03" name="2" value="k" class="buchstabe buchstabe1" onkeyup="nextField(this,this.value)" maxlength="1" type="text"/>
				<input id="s04" name="ss2" value="i" class="buchstabe gleich4" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="s05" name="ss3" value="la" class="gleich5" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="s06" name="3" value="k" class="buchstabe" onkeyup="nextField(this,this.value)" maxlength="1" type="text"/>
				<input id="s07" name="ss3" value="La" class="gleich5 neueswort" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="s08" name="ss3a" value="l" class="buchstabe ahnlich5 buchstabe1" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="s09" name="ss2" value="i" class="buchstabe gleich4" onkeyup="nextField(this,this.value)" maxlength="1" type="text"/>
				<input id="s10" name="ss3a" value="l" class="buchstabe ahnlich5 buchstabe1" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="s11" name="4" value="o" class="buchstabe" onkeyup="nextField(this,this.value)" maxlength="1" type="text"/>
				<input id="s12" name="5" value="r" class="buchstabe buchstabe1" onkeyup="nextField(this,this.value)" maxlength="1" type="text"/>
				<input id="s13" name="ss2" value="i" class="buchstabe gleich4" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="s14" name="ss1" value="Pa" class="gleich3 neueswort" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="s15" name="6" value="lou" maxlength="3" type="text"/>
				<input id="s16" type="submit" value="Absenden" name="muster3" style="width:80px; margin-left:30px;"/>
			</form>
		</div>
	</div>
	<div class="vierteversion" style="display:block; overflow:hidden; padding-bottom:10px">
		<div style="float:left; padding-right:20px;">
			<b>Version 4</b>
		</div>
		<div style="float:left;">
			<form name="muster4" action="/javascript/index.php" method="post">
				<input id="n01" name="ns1" value="Pu" class="gleich4" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="n02" name="ns5" value="ru" onkeyup="nextField(this,this.value)" maxlength="2" type="text"/>
				<input id="n03" name="ns2" value="run" class="gleich5 dreibuchstaben" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="3" type="text"/>
				<input id="n04" name="ns1" value="Pu" class="gleich4 neueswort" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="n05" name="ns2" value="run" class="gleich5 dreibuchstaben" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="3" type="text"/>
				<input id="n06" name="ns3" value="Fa" class="gleich1 neueswort" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="n07" name="ns4" value="mi" class="gleich2" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="n08" name="ns3" value="Fa" class="gleich1 neueswort" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="n09" name="ns4" value="mi" class="gleich2" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="n10" name="ns3" value="Fa" class="gleich1 neueswort" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="n11" type="submit" value="Absenden" name="muster4" style="width:80px; margin-left:30px;"/>
			</form>
		</div>
	</div>
	<div class="funfteversion" style="display:block; overflow:hidden; padding-bottom:10px">
		<div style="float:left; padding-right:20px;">
			<b>Version 5</b>
		</div>
		<div style="float:left;">
			<form name="muster5" action="/javascript/index.php" method="post">
				<input id="b01" name="bs1" value="Pi" class="gleich5" onkeydown="nextField(this,this.value)" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="b02" name="bs1" value="pi" class="gleich5" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="b03" name="bs2" value="to" class="gleich1" onkeyup="nextField(this,this.value)" maxlength="2" type="text"/>
				<input id="b04" name="bs1a" value="P" class="ahnlich5 buchstabe buchstabe1 neueswort" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="b05" name="1" value="u" class="buchstabe" onkeyup="nextField(this,this.value)" maxlength="1" type="text"/>
				<input id="b06" name="bs" value="ri" onkeyup="nextField(this,this.value)" maxlength="2" type="text"/>
				<input id="b07" name="bs2" value="to" class="gleich1" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="b08" name="bs1a" value="P" class="ahnlich5 buchstabe buchstabe1 neueswort" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="b09" name="bs3" value="e" class="gleich2 buchstabe" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="b10" name="bs1a" value="p" class="ahnlich5 buchstabe buchstabe1" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="b11" name="bs3" value="e" class="gleich2 buchstabe" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="b12" name="2" value="ru" onkeyup="nextField(this,this.value)" maxlength="2" type="text"/>
				<input id="b13" name="bs2" value="to" class="gleich1" onkeyup="nextField(this,this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="b14" type="submit" value="Absenden" name="muster4" style="width:80px; margin-left:30px;"/>
			</form>
		</div>
	</div>
</div>
</body>
</html>


    Ein wenig tricksen und schon klappt es ansatzweise. Ich bin etwas zu müde für sowas :wall: Fakt ist: Für dein Vorhaben brauchst du irgendentwas, wonach du dich richten kannst. Sei es tabindex oder die ID mit einer fortlaufenden Nummer.

    Bin leider kein JS-Experte, aber so, oder so ähnlich sollte es funktionieren.

    Beitrag zuletzt geändert: 24.4.2011 2:14:08 von fabo
  9. Autor dieses Themas

    things

    things hat kostenlosen Webspace.

    19:45, 24.4.2011
    @fabo
    Herzlichen Dank für deine Mühe, fabo! ^o^
    Leider geht deine Lösung auch nicht im IE und wenn ich zum Beispiel in Version 1 im ersten Feld statt "Pe" "hh" eingebe, springe ich zum Ende des nächsten Feldes; möchte ich dann das "e" in dem Feld ersetzen und markiere es mit Shift+Zurückpfeil springe ich mehrere Inputs weiter... Das ist nun gar nicht, was ich möcht... o~o
    Aber danke schön! *knuff* :)

    Gruß
    things

  10. fabo

    fabo hat kostenlosen Webspace.

    23:05, 24.4.2011
    Leider geht deine Lösung auch nicht im IE


    Welchen IE benutzt du denn? In minem IE9 funktioniert das. Andere IE's konnte ich nicht testen ;)

    "Pe" "hh" eingebe, springe ich zum Ende des nächsten Feldes


    Was ja deinem Wunsch entspricht. Mehr oder weniger. In meinem IE springt der Zeiger an den Anfang des nächsten Feldes.

    ; möchte ich dann das "e" in dem Feld ersetzen und markiere es mit Shift+Zurückpfeil springe ich mehrere Inputs weiter


    Das ist korrekt. Wenn man etwas am JS schraubt oder zumindest ein anderes Event als onkeyup verwendet, ist das Problem möglicherweise gelöst (in der JS Funktion beispielsweise auf onchange abfragen). Andererseits ist dieses Verhalten logisch. Der Browser weiß schließlich nicht, ob du nun Änderungen am Textfeld vornehmen willst, oder nicht. Dementsprechend wird der Zeiger beim onkeyup-Event in das nächste Textfeld gesetzt.

    Alternativ würde ich dir vorschlagen, nach Setzen des Focus, den Inhalt der Textbox zu markieren:

    document.getElementById(next).focus();
document.getElementById(next).select();


    Außerdem würde ich das onkeyup-Event etwas modifizieren, um die Tab-Taste zu ignorieren. Dies könnte man dann wiederrum mit Shift und den Pfeiltasten kombinieren und so den gewünschten Effekt erzielen:

    onkeyup="if ((event.keyCode||event.which) != 9 && (event.keyCode||event.which) != 16){ nextField(this,this.value); }"


    So wird die Funktion nur dann aufgerufen, wenn weder Shift, noch die Tab-Taste benutzt werden. Um noch mehr Tasten "auszuschließen", würde ich der Übersicht und Einfachheit halber eine seperate Funktion erstellen mit einem Array, bestehend aus sämtliche, auszuschließenden Keycodes. Dann wird bei jedem Tastendruck im onkeyup-Event diese Funktion aufgerufen und erst einmal die Taste geprüft, die das Event ausgelöst hat. Befindet sich der verwendete Keycode dann nicht in diesem Array, wird aus dieser Funktion die Funktion nextField() aufgerufen.

    <!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>
<title>Deepness of Soul</title>
<script type="text/javascript" src="zauberspruchhilfe.js"></script>
<script type="text/javascript">
//<![CDATA[
function nextField(e, elmnt, content) {
	e = e || window.event;
	var c = e.which || e.keyCode;
		
	if (c >= 65 && c <= 90) {
		if (content.length == elmnt.maxLength) {
			var id = elmnt.id;
			var nextNum = parseInt(id.match(/\d+$/), 10)+1;
			var firstletter = id.substring(0, 1);
			
			if(nextNum < 10) {
				nextNum = '0' + nextNum;
			}

			var next = firstletter + nextNum;
			if(document.getElementById(next) !== null) {
				document.getElementById(next).focus();
				document.getElementById(next).select();
			}
		}
	}
}
//]]>
</script>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div class="inhalt">
	<table style="border-width:0px;">
	<tr>
		<td width="45%">
			Die Zauberspr&uuml;che der Hexen in der Serie lauten wie folgt:<br/>
			<b>Version 1:</b> Pe-<font color="#A5CAE4">r</font>e-<font color="#A5CAE4">ka</font>-<font color="#A5CAE4">l</font>a P<font color="#A5CAE4">a</font>-<font color="#A5CAE4">po</font>-<font color="#A5CAE4">ri</font>-<font color="#A5CAE4">n</font>a Pe-<font color="#A5CAE4">k</font>e-la-to Pe-<font color="#A5CAE4">p</font>e-la-to<br/>
			<b>Version 2:</b> Pil-li Pil-li Po-pa-lu-<font color="#A5CAE4">ra</font> Po-pa-lu<br/>
			<b>Version 3:</b> Pa-<font color="#A5CAE4">me</font>-<font color="#A5CAE4">k</font>i-la-<font color="#A5CAE4">k</font> La-li-l<font color="#A5CAE4">o</font>-<font color="#A5CAE4">r</font>i Pa-<font color="#A5CAE4">lou</font><br/>
			<b>Version 4:</b> Pu-<font color="#A5CAE4">ru</font>-run Pu-run Fa-mi Fa-mi Fa<br/>
			<b>Version 5:</b> Pi-pi-to P<font color="#A5CAE4">u</font>-<font color="#A5CAE4">ri</font>-to Pe-pe-<font color="#A5CAE4">ru</font>-to / Pi-to Po-li-to Pu-ri-tan Pe-per-to
		</td>
	</tr>
	</table>
	<br/>
	<div class="ersteversion" style="display:block; overflow:hidden; padding-bottom:10px;">
		<div style="float:left; padding-right:20px;">
			<b>Version 1</b>
		</div>
		<div style="float:left;">
			<form name="muster1" action="/javascript/index.php" method="post">
				<input id="d01" name="ds1" value="Pe" class="gleich1" onkeyup="if ((event.keyCode||event.which) != 9 && (event.keyCode||event.which) != 16){ nextField(event, this, this.value); }" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="d02" name="1" value="r" class="buchstabe buchstabe1" onkeyup="nextField(event, this, this.value)" maxlength="1" type="text"/>
				<input id="d03" name="ds2" value="e" class="buchstabe gleich2" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="d04" name="2" value="ka" onkeyup="nextField(event, this, this.value)" maxlength="2" type="text"/>
				<input id="d05" name="3" value="l" class="buchstabe buchstabe1" onkeyup="nextField(event, this, this.value)" maxlength="1" type="text"/>
				<input id="d06" name="ds3" value="a" class="buchstabe gleich3" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="d07" name="ds1a" value="P" class="buchstabe ahnlich1 neueswort buchstabe1" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="d08" name="4" value="a" class="buchstabe" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="d09" name="5" value="po" onkeyup="nextField(event, this, this.value)" maxlength="2" type="text"/>
				<input id="d10" name="6" value="ri" onkeyup="nextField(event, this, this.value)" maxlength="2" type="text"/>
				<input id="d11" name="7" value="n" class="buchstabe buchstabe1" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="d12" name="ds3" value="a" class="buchstabe gleich3" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="d13" name="ds1" value="Pe" class="gleich1 neueswort" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="d14" name="8" value="k" class="buchstabe buchstabe1" onkeyup="nextField(event, this, this.value)" maxlength="1" type="text"/>
				<input id="d15" name="ds2" value="e" class="buchstabe gleich2" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="d16" name="ds4" value="la" class="gleich4" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="d17" name="ds5" value="to" class="gleich5" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="d18" name="ds1" value="Pe" class="gleich1 neueswort" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="d19" name="9" value="p" class="buchstabe buchstabe1" onkeyup="nextField(event, this, this.value)" maxlength="1" type="text"/>
				<input id="d20" name="ds2" value="e" class="buchstabe gleich2" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="d21" name="ds4" value="la" class="gleich4" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="d22" name="ds5" value="to" class="gleich5" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="d23" type="submit" value="Absenden" name="muster1" style="width:80px; margin-left:30px;"/>
		</div>
	</div>
	<div class="zweiteversion" style="display:block; overflow:hidden; padding-bottom:10px">
		<div style="float:left; padding-right:20px;">
			<b>Version 2</b>
		</div>
		<div style="float:left;">
			<form name="muster2" action="/javascript/index.php" method="post">
				<input id="e01" name="es3" value="Pi" class="gleich2" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="e02" type="text" name="es2" value="li" class="gleich3" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2"/>
				<input id="e03" name="es3" value="Pi" class="gleich2 neueswort" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="e04" name="es2" value="li" class="gleich3" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="e05" name="es1" value="Po" class="gleich4 neueswort" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="e06" name="es5" value="pa" class="gleich5" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="e07" name="es4" value="lu" class="gleich1" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="e08" name="1" value="ra" onkeyup="nextField(event, this, this.value)" maxlength="2" type="text"/>
				<input id="e09" name="es1" value="Po" class="gleich4 neueswort" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="e10" name="es5" value="pa" class="gleich5" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="e11" name="es4" value="lu" class="gleich1" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="e12" type="submit" value="Absenden" name="muster2" style="width:80px; margin-left:30px;"/>
			</form>
		</div>
	</div>
	<div class="dritteversion" style="display:block; overflow:hidden; padding-bottom:10px">
		<div style="float:left; padding-right:20px;">
			<b>Version 3</b>
		</div>
		<div style="float:left;">
			<form name="muster3" action="/javascript/index.php" method="post">
				<input id="s01" name="ss1" value="Pa" class="gleich3" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="s02" name="1" value="me" onkeyup="nextField(event, this, this.value)" maxlength="2" type="text"/>
				<input id="s03" name="2" value="k" class="buchstabe buchstabe1" onkeyup="nextField(event, this, this.value)" maxlength="1" type="text"/>
				<input id="s04" name="ss2" value="i" class="buchstabe gleich4" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="s05" name="ss3" value="la" class="gleich5" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="s06" name="3" value="k" class="buchstabe" onkeyup="nextField(event, this, this.value)" maxlength="1" type="text"/>
				<input id="s07" name="ss3" value="La" class="gleich5 neueswort" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="s08" name="ss3a" value="l" class="buchstabe ahnlich5 buchstabe1" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="s09" name="ss2" value="i" class="buchstabe gleich4" onkeyup="nextField(event, this, this.value)" maxlength="1" type="text"/>
				<input id="s10" name="ss3a" value="l" class="buchstabe ahnlich5 buchstabe1" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="s11" name="4" value="o" class="buchstabe" onkeyup="nextField(event, this, this.value)" maxlength="1" type="text"/>
				<input id="s12" name="5" value="r" class="buchstabe buchstabe1" onkeyup="nextField(event, this, this.value)" maxlength="1" type="text"/>
				<input id="s13" name="ss2" value="i" class="buchstabe gleich4" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="s14" name="ss1" value="Pa" class="gleich3 neueswort" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="s15" name="6" value="lou" maxlength="3" type="text"/>
				<input id="s16" type="submit" value="Absenden" name="muster3" style="width:80px; margin-left:30px;"/>
			</form>
		</div>
	</div>
	<div class="vierteversion" style="display:block; overflow:hidden; padding-bottom:10px">
		<div style="float:left; padding-right:20px;">
			<b>Version 4</b>
		</div>
		<div style="float:left;">
			<form name="muster4" action="/javascript/index.php" method="post">
				<input id="n01" name="ns1" value="Pu" class="gleich4" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="n02" name="ns5" value="ru" onkeyup="nextField(event, this, this.value)" maxlength="2" type="text"/>
				<input id="n03" name="ns2" value="run" class="gleich5 dreibuchstaben" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="3" type="text"/>
				<input id="n04" name="ns1" value="Pu" class="gleich4 neueswort" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="n05" name="ns2" value="run" class="gleich5 dreibuchstaben" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="3" type="text"/>
				<input id="n06" name="ns3" value="Fa" class="gleich1 neueswort" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="n07" name="ns4" value="mi" class="gleich2" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="n08" name="ns3" value="Fa" class="gleich1 neueswort" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="n09" name="ns4" value="mi" class="gleich2" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="n10" name="ns3" value="Fa" class="gleich1 neueswort" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="n11" type="submit" value="Absenden" name="muster4" style="width:80px; margin-left:30px;"/>
			</form>
		</div>
	</div>
	<div class="funfteversion" style="display:block; overflow:hidden; padding-bottom:10px">
		<div style="float:left; padding-right:20px;">
			<b>Version 5</b>
		</div>
		<div style="float:left;">
			<form name="muster5" action="/javascript/index.php" method="post">
				<input id="b01" name="bs1" value="Pi" class="gleich5" onkeydown="nextField(event, this, this.value)" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="b02" name="bs1" value="pi" class="gleich5" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="b03" name="bs2" value="to" class="gleich1" onkeyup="nextField(event, this, this.value)" maxlength="2" type="text"/>
				<input id="b04" name="bs1a" value="P" class="ahnlich5 buchstabe buchstabe1 neueswort" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="b05" name="1" value="u" class="buchstabe" onkeyup="nextField(event, this, this.value)" maxlength="1" type="text"/>
				<input id="b06" name="bs" value="ri" onkeyup="nextField(event, this, this.value)" maxlength="2" type="text"/>
				<input id="b07" name="bs2" value="to" class="gleich1" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="b08" name="bs1a" value="P" class="ahnlich5 buchstabe buchstabe1 neueswort" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="b09" name="bs3" value="e" class="gleich2 buchstabe" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="b10" name="bs1a" value="p" class="ahnlich5 buchstabe buchstabe1" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="b11" name="bs3" value="e" class="gleich2 buchstabe" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text"/>
				<input id="b12" name="2" value="ru" onkeyup="nextField(event, this, this.value)" maxlength="2" type="text"/>
				<input id="b13" name="bs2" value="to" class="gleich1" onkeyup="nextField(event, this, this.value)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text"/>
				<input id="b14" type="submit" value="Absenden" name="muster4" style="width:80px; margin-left:30px;"/>
			</form>
		</div>
	</div>
</div>
</body>
</html>


    Im Übrigen ist dein verwendeter Code nicht valide ;)

    Im o.g. Code habe ich dir eine Tastenprüfung eingebaut d.h. nur, wenn Buchstaben eingegeben werden, wird die entsprechende Prüfung und der Focuswechsel vorgenommen. Wird der Focus gewechselt, wird der Inhalt des Textfelds markiert, anstatt dass der Zeiger an den Anfang des Feldes springt.

    Alles in Allem bin ich schon etwas stolz auf meine Arbeit :sex:

    Aber Spaß bei Seite... Ich hab das Ganze jetzt erfolgreich in den jeweils aktuellen Versionen des IE, FF und Chrome getestet.

    Beitrag zuletzt geändert: 25.4.2011 0:01:35 von fabo
  11. Autor dieses Themas

    things

    things hat kostenlosen Webspace.

    15:46, 25.4.2011
    Hallo fabo, danke dass du dir solche Mühe machst :)

    Du musst allerdings meine Antwort schon satzweise nehmen *s* Ich hab grad irgendwie das Gefühl wir fangen 2 Schritte weiter zurück an, as ich schon gekommen bin xD"
    Du hast Recht, mit deinem Code springt der Cursor sowohl im IE als auch im FF. Allerdings sind die ganzen kleineren Code-Steps, die ich gemacht habe damit nichtig.
    Stimmt auch wieder - der Cursor geht im IE an den Anfang und im FF ans Ende - darum hab ich in meinem Code auch alles selectiert. Ja, das kann man noch anpassen.
    Das Springen, wenn schon die maximale Anzahl an Zeichen erreicht ist, habe ich in wochenlanger Arbeit behoben xD" Es wird die Position vom Cursor erkannt und nur,wenn er an der letzten Stelle steht, wird das nächste Feld fokussiert. Somit ist es möglich eine schon vorhandene Eingabe im nachhinein mit der Tastatur zu ändern.

    Ich verstehe grade nicht, warum du die Tabtaste ignorieren möchtest. Und Shift und die Pfeile.. Schaltet man die Tabtaste aus, kann der Benutzer nicht mehr über die Tastatur vor oder zurück und wenn die Pfeiltasten auch noch weg sind ist eine Änderung ja nur noch mit der Maus möglich... Das finde ich nicht sehr benutzerfreundlich... ô.o Oder seh ich da jetzt was falsch?

    Das mit den Keycodes ist ne interessante Idee! Dass der Spaß nicht valide ist, ist klar xD Ich bin ja noch an der grundlegenden Funktion... Aber du hast Recht: ich hätte das bestimmt vergessen *lol*

    Ich werd nun am besten nochmal schauen, warum dein Code im IE geht und meiner nicht und dann haben wirs glaube ich schon *s*

    Grüße
    things

  12. fabo

    fabo hat kostenlosen Webspace.

    16:38, 25.4.2011
    Ich verstehe grade nicht, warum du die Tabtaste ignorieren möchtest. Und Shift und die Pfeile.. Schaltet man die Tabtaste aus, kann der Benutzer nicht mehr über die Tastatur vor oder zurück und wenn die Pfeiltasten auch noch weg sind ist eine Änderung ja nur noch mit der Maus möglich... Das finde ich nicht sehr benutzerfreundlich... ô.o Oder seh ich da jetzt was falsch?


    Du hast mich falsch verstanden ;) Der Focus soll ja nur ins nächste Feld übergehen, wenn man das Feld ausfüllt/verändert und das Feld voll ist. Dementsprechend wird die Funktion zum wechseln des Focus NICHT ausgeführt, wenn man Tab oder eine andere Taste drückt.

    Ich habe lediglich das Problem mit Shift+Pfeiltasten "behoben". Der o.g. Code macht exakt das, was du möchtest. Probier es aus ;)

    Also nochmal... Du hast nun eine Funktion, die bewirkt, dass der Cursor automatisch ins nächste Feld springt, wenn das vorherige Feld ausgefüllt wird.

    Beim 1. Code hattest du das Problem, dass (logischerweise) auch Tab, Pfeil und andere Tasten das Event aufgerufen haben. Mit dem 2., letzten Code, ist das Problem durch Eingrenzung mittels Keycodes behoben. Das Event wird nurnoch dann aufgerufen, wenn man Buchstaben innerhalb eines Feldes drückt.

    c >= 65 && c <= 90


    Hier wird geprüft, ob der verwendete Keycode (also ob die gedrückte Taste) sich innerhalb einer Range von 65 (a) bis 90 (z) befindet. Wenn ja, wird die Funktion fortgeführt und die normalen Prüfungen nehmen ihren Lauf. Wenn nicht, wird die Funktion nicht fortgeführt und dementsprechend auch der Focus nicht gewechselt.

    Beitrag zuletzt geändert: 25.4.2011 16:43:46 von fabo
  13. Autor dieses Themas

    things

    things hat kostenlosen Webspace.

    23:55, 7.5.2011
    So, um das ganze nochmal abzuschließen poste ich nun meinen endgültigen Code nochmal.

    Er geht nun im IE und FF und auch Chrome und Opera tun was ich will:
    * springt man in das nächste Input, wird der Inhalt markiert und kann überschrieben werden
    * es ist möglich den ersten Buchstaben in einem Feld auf ein anderes Feld zu übertragen
    * per Tastatur ist es möglich zwischen den Inputs zu navigieren
    * man kann über Strg+Pfeil einen Text markieren
    * man kann auch den letzten Buchstaben im Input markieren, ohne zu springen
    * auch Umlaute werden als Buchstaben behandelt

    Danke nochmal an dich, fabo! Du hast mir wirklich geholfen ^^

    <!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Zauberspruchgenerator</title>
<script type="text/javascript">

/* ruft die benötigten Funktionen auf */
function aktualisieren(input, event) {
	//Inputinhalt in text speichern
	var value = input.value;
	//Variabel start mit Zahl (CursorPos) füllen
	var start = cursorposition(input);
	//der Inputinhalt wird vor der Cursorstelle abgeschnitten 
	var hintercursor = value.substring(start);
	var regex = /^[a-zäöü ]+$/i;
	if(!value.match(regex)) {
		document.getElementById("ausgabe").innerHTML = "Bitte benutzen Sie nur Buchstaben für Ihre Eingabe!";
	}
	else {
		document.getElementById("ausgabe").innerHTML = "";
	}
	vergleichen(start, hintercursor, input.id, event);
}

var markierung = "";

/* Auslesen der Cursorposition um in der Funktion "vergleichen" ggf weiter zu springen */
function cursorposition(input) {
  input.focus();
  /* für Internet Explorer */
  if(typeof document.selection != 'undefined') {
    /* Einfügen des Formatierungscodes */    
	/* Position in Zahl ausgeben */
	var position = document.selection.createRange();
	position.moveStart ('character', -input.value.length);
	var IEcaretPos = position.text.length;
	/* wenn Text markiert, ihn in der Variabel speichern */
	markierung = document.selection.createRange().text;
	return IEcaretPos;
  }
  /* für neuere auf Gecko basierende Browser */
  else if(typeof input.selectionStart != 'undefined')
  {
    /* Einfügen des Formatierungscodes */
    var FFcaretPos = input.selectionStart;
	return FFcaretPos;
  }
}

/* prüft ob die Maximallände erreicht und hinter dem Cursor kein Inhalt mehr steht - setzt den Fokus in diesem Fall auf das nächste Element */
function vergleichen(cursorpunkt, hintercursor, id, e) {
	var maxlange = document.getElementById(id).maxLength;
	/* Keycode um Sprünge mit Tab(), Runterpfeil() und Linkspfeil() abzufangen */
	e = e || window.event;
	var taste = e.which || e.keyCode;
	/* nur Buchstaben(65 - 90) und Leerzeichen(8) und Rechtspfeil(39) und ä(222), ö(192) und ü(59) */
	if(taste >= 65 &&  taste <= 90 || taste == 8 || taste == 39 || taste == 222 || taste == 192 || taste == 59 || taste == 59) {
		var bewegung = 1;
	}
	else {
		var bewegung = 0;
	}

	if(maxlange == cursorpunkt && hintercursor == "" && bewegung == 1 && markierung == "") {
		//für IDs nach dem Muster xxxx00
		var nachstezahl = id.substring(1);
		nachstezahl = parseFloat(nachstezahl) + 1;
		if(nachstezahl < 10) {
			nachstezahl = "0" + nachstezahl;
		}
		else { nachstezahl = "" + nachstezahl; }
		var id2 = id.substring(0,1) + nachstezahl;
		//wenn es ein Element mit der neuen ID gibt
		if(document.getElementById(id2) != null) {
			document.getElementById(id2).select();
		//	document.getElementById(id2).focus();
		}
	}
}

function silbendublizieren(position, value) {
//für alle = gleiche Felder mit dem Inhalt füllen
	silbenarray = document.getElementsByName(position);
	for(var i = 0; i < silbenarray.length; i++) {
		silbenarray[i].value = value;
	}
//xx0 zu xx0a: falls es Felder gibt, die den ersten Buchstaben dieses Feldes brauchen
	var ersterbuchstabe = value.charAt(0);
	//Felder finden, die davon abhängen
	var abuchstabefeld = position + "a";
	var afelder = document.getElementsByName(abuchstabefeld);
	if(afelder.length != 0) {
		for(var i = 0; i < afelder.length; i++) {
			//altes Value des Feldes xx0a und festlegen des neuen Feldes
			var altesvalue = afelder[i].value.slice(1,2);
			afelder[i].value = ersterbuchstabe + altesvalue;
		}
	}	
//xx0a zu xx0: den ersten Buchstaben an xx0 weitergeben
	if(position.charAt(3) == "a") {
		//Name der Zielinputs
		var baseinputvona = position.slice(0,3);
		//Zielinputs in ein Array
		silbenarray = document.getElementsByName(baseinputvona);
		for(var i = 0; i < silbenarray.length; i++) {
			//altes Value auslesen & den ersten Buchstaben entfernen
			var altesvalue = silbenarray[i].value;
			altesvalue = altesvalue.slice(1,2);
			//erster Buchstabe des eigenen Values
			value = value.charAt(0);
			//neuer erster Buchstabe + altes Value
			silbenarray[i].value = value + altesvalue;
		}
	}
//xx0x9z: wenn an der 5. Stelle ein z steht, wird der letzte Buchstabe von xx9 hier letzter Buchstabe
	if(position.charAt(5) == "z") {
		//den Inhalt von xx9 ermitteln
		var baseinputvonz = position.slice(0,2) + position.charAt(4,5);
		var ausgangsvalue = document.getElementsByName(baseinputvonz)[0].value;
		//den letzten Buchstaben auslesen
		var letzterbuchstabe = ausgangsvalue.charAt(ausgangsvalue.length - 1);
		//den Buchstaben als letzten Buchstaben von xx0x9z definieren
		var obergrenze = value.length - 1;
		if(obergrenze < 1) {obergrenze = 1; }
		var erstvalue = value.slice(0, obergrenze);
		//alle diese Felder mit dem neuen Inhalt füllen
		silbenarray = document.getElementsByName(position);
		for(var i = 0; i < silbenarray.length; i++) {
			silbenarray[i].value = erstvalue + letzterbuchstabe;
		}
	}
}
</script>
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head><body>
<div class="inhalt">

<table style="border-width:0px;">
<tr>
<td width="45%">Die Zauberspr&uuml;che der Hexen in der Serie lauten wie folgt:<br>
<b>Version 1:</b> Pe-<font color="#A5CAE4">r</font>e-<font color="#A5CAE4">ka</font>-<font color="#A5CAE4">l</font>a P<font color="#A5CAE4">a</font>-<font color="#A5CAE4">po</font>-<font color="#A5CAE4">ri</font>-<font color="#A5CAE4">n</font>a Pe-<font color="#A5CAE4">k</font>e-la-to Pe-<font color="#A5CAE4">p</font>e-la-to<br>
<b>Version 2:</b> Pil-li Pil-li Po-pa-lu-<font color="#A5CAE4">ra</font> Po-pa-lu<br>
<b>Version 3:</b> Pa-<font color="#A5CAE4">me</font>-<font color="#A5CAE4">k</font>i-la-<font color="#A5CAE4">k</font> La-li-l<font color="#A5CAE4">o</font>-<font color="#A5CAE4">r</font>i Pa-<font color="#A5CAE4">lou</font><br>
<b>Version 4:</b> Pu-<font color="#A5CAE4">ru</font>-run Pu-run Fa-mi Fa-mi Fa<br>
<b>Version 5:</b> Pi-pi-to P<font color="#A5CAE4">u</font>-<font color="#A5CAE4">ri</font>-to Pe-pe-<font color="#A5CAE4">ru</font>-to / Pi-to Po-li-to Pu-ri-tan Pe-per-to</td></tr></table><br>

<div class="ersteversion" style="display:block; overflow:hidden; padding-bottom:10px;">
<div style="float:left; padding-right:20px;"><b>Version 1</b></div>
<div style="float:left;">
<form name="muster1" action="<?php echo($_SERVER["PHP_SELF"]) ?>" method="post"> 
    <input id="d01" name="ds1" value="Pe" class="gleich1" onkeyup="aktualisieren(this, event)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input id="d02" name="1" value="r" class="buchstabe buchstabe1" onkeyup="aktualisieren(this, event)" maxlength="1" type="text" />
    <input id="d03" name="ds2" value="e" class="buchstabe gleich2" onkeyup="aktualisieren(this, event)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text" />
    <input id="d04" name="2" value="ka" onkeyup="aktualisieren(this, event)" maxlength="2" type="text" />
    <input id="d05" name="3" value="l" class="buchstabe buchstabe1" onkeyup="aktualisieren(this, event)" maxlength="1" type="text" />
    <input id="d06" name="ds3" value="a" class="buchstabe gleich3" onkeyup="aktualisieren(this, event)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text" />
    <input id="d07" name="ds1a" value="P" class="buchstabe ahnlich1 neueswort buchstabe1" onkeyup="aktualisieren(this, event)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text" />
    <input id="d08" name="4" value="a" class="buchstabe" onkeyup="aktualisieren(this, event)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text" />
    <input id="d09" name="5" value="po" onkeyup="aktualisieren(this, event)" maxlength="2" type="text" />
    <input id="d10" name="6" value="ri" onkeyup="aktualisieren(this, event)" maxlength="2" type="text" />
    <input id="d11" name="7" value="n" class="buchstabe buchstabe1" onkeyup="aktualisieren(this, event)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text" />
    <input id="d12" name="ds3" value="a" class="buchstabe gleich3" onkeyup="aktualisieren(this, event)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text" />
    <input id="d13" name="ds1" value="Pe" class="gleich1 neueswort" onkeyup="aktualisieren(this, event)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input id="d14" name="8" value="k" class="buchstabe buchstabe1" onkeyup="aktualisieren(this, event)" maxlength="1" type="text" />
    <input id="d15" name="ds2" value="e" class="buchstabe gleich2" onkeyup="aktualisieren(this, event)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text" />
    <input id="d16" name="ds4" value="la" class="gleich4" onkeyup="aktualisieren(this, event)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input id="d17" name="ds5" value="to" class="gleich5" onkeyup="aktualisieren(this, event)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input id="d18" name="ds1" value="Pe" class="gleich1 neueswort" onkeyup="aktualisieren(this, event)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input id="d19" name="9" value="p" class="buchstabe buchstabe1" onkeyup="aktualisieren(this, event)" maxlength="1" type="text" />
    <input id="d20" name="ds2" value="e" class="buchstabe gleich2" onkeyup="aktualisieren(this, event)" onblur="silbendublizieren(this.name, this.value)" maxlength="1" type="text" />
    <input id="d21" name="ds4" value="la" class="gleich4" onkeyup="aktualisieren(this, event)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input id="d22" name="ds5" value="to" class="gleich5" onkeyup="aktualisieren(this, event)" onblur="silbendublizieren(this.name, this.value)" maxlength="2" type="text" />
    <input id="d23" type="submit" value="Absenden" name="muster1" style="width:80px; margin-left:30px;" />
</form>
</div>
<?php
if(isset($_POST["muster1"])) {
	$a = $_POST["ds1"];
	$b = $_POST["1"];
	$c = $_POST["ds2"];
	$d = $_POST["2"];
	$e = $_POST["3"];
	$f = $_POST["ds3"];
	$g = $_POST["ds1a"];
	$h = $_POST["4"];
	$i = $_POST["5"];
	$j = $_POST["6"];
	$k = $_POST["7"];
//	$l = $_POST["ds3"];
//	$m = $_POST["ds1"];
	$n = $_POST["8"];
//	$o = $_POST["ds2"];
	$p = $_POST["ds4"];
	$q = $_POST["ds5"];
//	$r = $_POST["ds1"];
	$s = $_POST["9"];
//	$t = $_POST["ds2"];
//	$u = $_POST["ds4"];
//	$v = $_POST["ds5"];
	echo('<p>' . $a . $b . $c . $d .  $e . $f . ' ' . $g . $h . $i . $j . $k . $f . ' ' . $a . $n . $c . $p . $q . ' ' . $a . $s . $c . $p . $q . '</p>');
}
?>
</div>
<div id="ausgabe"></div>
</div></div></body></html>

  14. fabo

    fabo hat kostenlosen Webspace.

    3:23, 8.5.2011
    things schrieb:

    ...

    Danke nochmal an dich, fabo! Du hast mir wirklich geholfen ^^

    ...


    Gerne. Und das, obwohl ich garkein Javascript kann :wall: Freut mich, dass es nun endlich funktioniert.

  15. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!