Chris: onfocus und onselect mit tastendruck

Beitrag lesen

Habe ein Problem:

Habe 2 x 3 Eingabefelder mit 2,2,4 Zeichen als Maximallänge

Ich möchte erreichen, das wenn im ersten Feld beide Zeichen eingetippt worden sind automatisch der cursor in das 2. Feld springt.

Technisch würde es funktionieren, aber praktisch bleibt mein Cursor optisch im ersten Feld hinter der zweiten zahl stehen drück ich ein zeichen dann spring er weiter.

Javascript Quellcode:

<script type="text/javascript">
function Tastendrucktag1 (keycode)
{
keycode=parseInt(keycode);
if (document.berufsschule.vomtag.value != document.berufsschule.xtag1.value){document.berufsschule.xtag1.value = document.berufsschule.vomtag.value; document.berufsschule.keypressvaluedatum.value = "tag1";}
if (((keycode == 48) ||(keycode == 49) ||(keycode == 50) ||(keycode == 51) ||(keycode == 52) ||(keycode == 53) ||(keycode == 54) ||(keycode == 55) || (keycode == 56) || (keycode == 57) || (keycode == 96) ||(keycode == 97) ||(keycode == 98) ||(keycode == 99) ||(keycode == 100) ||(keycode == 101) ||(keycode == 102) ||(keycode == 103) || (keycode == 104) || (keycode == 105)) && (document.berufsschule.vomtag.value.length == 2) && (document.berufsschule.keypressvaluedatum.value == "tag1")){document.berufsschule.keypressvaluedatum.value = ""; document.berufsschule.vommonat.select(); document.berufsschule.vommonat.focus(); document.berufsschule.keypressvaluedatum.value = "";}
}

function Tastendrucktag2 (keycode)
{
keycode=parseInt(keycode);
if (document.berufsschule.bistag.value != document.berufsschule.xtag2.value){document.berufsschule.xtag2.value = document.berufsschule.bistag.value; document.berufsschule.keypressvaluedatum.value = "tag2";}
if (((keycode == 48) ||(keycode == 49) ||(keycode == 50) ||(keycode == 51) ||(keycode == 52) ||(keycode == 53) ||(keycode == 54) ||(keycode == 55) || (keycode == 56) || (keycode == 57) || (keycode == 96) ||(keycode == 97) ||(keycode == 98) ||(keycode == 99) ||(keycode == 100) ||(keycode == 101) ||(keycode == 102) ||(keycode == 103) || (keycode == 104) || (keycode == 105)) && (document.berufsschule.bistag.value.length == 2) && (document.berufsschule.keypressvaluedatum.value == "tag2")){document.berufsschule.keypressvaluedatum.value = ""; document.berufsschule.bismonat.select(); document.berufsschule.bismonat.focus(); document.berufsschule.keypressvaluedatum.value = "";}
}

function Tastendruckmonat1 (keycode)
{
keycode=parseInt(keycode);
if (document.berufsschule.vommonat.value != document.berufsschule.xmonat1.value){document.berufsschule.xmonat1.value = document.berufsschule.vommonat.value; document.berufsschule.keypressvaluedatum.value = "monat1";}
if (((keycode == 48) ||(keycode == 49) ||(keycode == 50) ||(keycode == 51) ||(keycode == 52) ||(keycode == 53) ||(keycode == 54) ||(keycode == 55) || (keycode == 56) || (keycode == 57) || (keycode == 96) ||(keycode == 97) ||(keycode == 98) ||(keycode == 99) ||(keycode == 100) ||(keycode == 101) ||(keycode == 102) ||(keycode == 103) || (keycode == 104) || (keycode == 105)) && (document.berufsschule.vommonat.value.length == 2) && (document.berufsschule.keypressvaluedatum.value == "monat1")){document.berufsschule.keypressvaluedatum.value = ""; document.berufsschule.vomjahr.select(); document.berufsschule.vomjahr.focus(); document.berufsschule.keypressvaluedatum.value = "";}
}

function Tastendruckmonat2 (keycode)
{
keycode=parseInt(keycode);
if (document.berufsschule.bismonat.value != document.berufsschule.xmonat2.value){document.berufsschule.xmonat2.value = document.berufsschule.bismonat.value; document.berufsschule.keypressvaluedatum.value = "monat2";}
if (((keycode == 48) ||(keycode == 49) ||(keycode == 50) ||(keycode == 51) ||(keycode == 52) ||(keycode == 53) ||(keycode == 54) ||(keycode == 55) || (keycode == 56) || (keycode == 57) || (keycode == 96) ||(keycode == 97) ||(keycode == 98) ||(keycode == 99) ||(keycode == 100) ||(keycode == 101) ||(keycode == 102) ||(keycode == 103) || (keycode == 104) || (keycode == 105)) && (document.berufsschule.bismonat.value.length == 2) && (document.berufsschule.keypressvaluedatum.value == "monat2")){document.berufsschule.keypressvaluedatum.value = ""; document.berufsschule.bisjahr.select(); document.berufsschule.bisjahr.focus(); document.berufsschule.keypressvaluedatum.value = "";}
}

function Tastendruckjahr1 (keycode)
{
keycode=parseInt(keycode);
if (document.berufsschule.vomjahr.value != document.berufsschule.xjahr1.value){document.berufsschule.xjahr1.value = document.berufsschule.vomjahr.value; document.berufsschule.keypressvaluedatum.value = "jahr1";}

}

function Tastendruckjahr2 (keycode)
{
keycode=parseInt(keycode);
if (document.berufsschule.bisjahr.value != document.berufsschule.xjahr2.value){document.berufsschule.xjahr2.value = document.berufsschule.bisjahr.value; document.berufsschule.keypressvaluedatum.value = "jahr2";}
}

function textfeldfarbefocus(ti_el) {ti_el.style.backgroundColor="#ccffcc";}
function textfeldfarbenofocus(ti_el) {ti_el.style.backgroundColor="";}

</script>

Body Quellcode

<form method="POST" action="egal" name="berufsschule">
<input type="hidden" name="keypressvaluedatum" value="">
<input type="hidden" name="xtag1" value="$vomtag">
<input type="hidden" name="xtag2" value="$bistag">
<input type="hidden" name="xmonat1" value="$vommonat">
<input type="hidden" name="xmonat2" value="$bismonat">
<input type="hidden" name="xjahr1" value="$vomjahr">
<input type="hidden" name="xjahr2" value="$bisjahr">

<table id="AutoNumber2" style="BORDER-COLLAPSE: collapse" borderColor="#111111" cellSpacing="5" cellPadding="5" border="0">
  <tr>
    <td><b><font face="Arial">vom:</font></b></td>
    <td><font face="Arial"><b>
    <input type="text" onFocus="textfeldfarbefocus(this);" onBlur="textfeldfarbenofocus(this);"  onkeydown="Tastendrucktag1(event.keyCode);" name="vomtag" value="$vomtag" size="2" maxlength="2">.<input type="text" onFocus="textfeldfarbefocus(this);" onBlur="textfeldfarbenofocus(this);" onkeydown="Tastendruckmonat1(event.keyCode);" value="$vommonat" name="vommonat" size="2" maxlength="2">.<input type="text" onFocus="textfeldfarbefocus(this);" onBlur="textfeldfarbenofocus(this);" name="vomjahr" onkeydown="Tastendruckjahr1(event.keyCode);" value="$vomjahr" size="4" maxlength="4"> </b></font></td>
    <td>
    <b><font face="Arial">bis:</font></b></td>
    <td><font face="Arial"><b>
    <input type="text" onFocus="textfeldfarbefocus(this); this.select();" onBlur="textfeldfarbenofocus(this);"  onkeydown="Tastendrucktag2(event.keyCode);" name="bistag" value="$bistag" size="2" maxlength="2">.<input type="text" onFocus="textfeldfarbefocus(this);" onBlur="textfeldfarbenofocus(this);" onkeydown="Tastendruckmonat2(event.keyCode);" value="$bismonat" name="bismonat" size="2" maxlength="2">.<input type="text" onFocus="textfeldfarbefocus(this);" onBlur="textfeldfarbenofocus(this);" name="bisjahr" onkeydown="Tastendruckjahr2(event.keyCode);" value="$bisjahr"size="4" maxlength="4"> </b></font></td>
  </tr>
</table>
</form>

Meine Frage:
Kann ich erreichen das auch optisch vor dem tastendruck der curser im richtigem feld blinkt?