onfocus und onselect mit tastendruck

[Chris]

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?

[frankx]

Hellihello Chris,

Habe ein Problem:

versuchs doch beim nächsten Mal:

a) mit Syntaxhighlighthing
b) mit einem Auszug, der nur dein Problem umfasst.

Verwendest Du neben keydown auch noch die Funktion keyup? In jedem Fall ist das, was Du willst, machbar.

Dank und Gruß,

frankx

[plan_B]

Hallo,

Das gute an PHP ist, auf Clientseite sieht man nicht, wie umständlich da programmiert wurde.

aber beim js-coden muss man doch damit rechnen, dass mal ein Blick auf den Sourcecode geworfen wird.

  

> 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) &&  

kann man das nicht vernünftig schreiben?

  
if(((keycode>= 48 && keycode<=57) || (keycode>= 96 && keycode<=105))  
   && (document.berufsschule.vomtag.value.length == 2) )  

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

ein Input-Feld kann nur selektiert werden, wenn es den Focus hat.

es ist immer praktisch den event-Funktionen die Referenz auf das auslösende Element mitzugeben. Damit kann vieles einfacher sein:

  
<input type="text" name="d" size="2" onkeyup="kup(event,this)" onkeydown="kdwn(event,this)" >  
.<input type="text" name="d" size="2" onkeyup="kup(event,this)" onkeydown="kdwn(event,this)" >  
.<input type="text" name="d" size="4" onkeyup="kup(event,this)" onkeydown="kdwn(event,this)" >  

  
function kup(ev,elem) {  
 var kc=ev.keyCode;  
 if (isNaN(elem.value)) elem.value="";  
 if (elem.value.length > elem.size) elem.value=elem.substr(0,elem.size)  
 if (elem.value.length >= elem.size ) {  // das nächste Element finden.  
  var es=elem.form.elements;  
  for (var i=0,ie=es.length;i<ie;i++) {  
   if (es[i] == elem && i< (ie-1)) {  
    es[i+1].focus();  
    i=ie;  
    }  
   }  
  }  
 }  
  
function kdwn(ev,elem) {  
 var kc=ev.keyCode;  
 var f=elem.form;  
 }  

Ein paar Tasten brauchen noch ne Sonderbehandlung z.B. TAB ,shift-TAB

Gruß plan_B