Chris Ross: OnBlur vor onFocus ???

Beitrag lesen

Hallo Forum,

ich habe folgendes Problem:
es müssen sich ein <select> und ein <input type="text" ..> gegenseitig überwachen. D.h., wenn etwas selectiert wurde (selectedIndex != 0), soll das Input-Feld disabled werden. Das Input-Feld soll wieder freigegeben werden, wenn nichts selectiert wurde (selectedIndex == 0).

Umgekehrt soll das Input-Feld, wenn etwas drin steht, das <select> disablen. Ebenso soll das <select> wieder aktiviert werden, sobald das Input-Feld keinen Wert enthält.

Im Input-Feld versuche ich das per onFocus und OnBlur zu realisieren
und das <select> wird per onChange überwacht.

Jetzt tut sich folgendes Problem auf:
Wenn ich etwas selectiere, dann wird wie gewünscht das Input-Feld disabled. Hebe ich die Selection wieder auf, wird auch das Input-Feld wieder freigegeben. Und nun passiert es: Sobald ich in das Input-Feld klicke (onFocus), dann wird onBlur ausgeführt, und erst DANACH onFocus?!

Hier mein Quelltext:

Im <script> die Funktionen:

function chkField(s, z) {
   if(document.getElementsByName(s)[0].selectedIndex != 0) {
    document.getElementsByName(z)[0].disabled = true;
    return;
   }
   else {
    document.getElementsByName(z)[0].disabled = false;
    return;
   }
  }

function chkInput(s, z) {
   if(document.getElementsByName(z)[0].focus == true) {
    document.getElementsByName(s)[0].disabled = true;
    return;
   }
   else {
    document.getElementsByName(s)[0].disabled = false;
    return;
   }
  }

function chkLeer(s, z, wert) {
   if(wert != '') {
    document.getElementsByName(s)[0].disabled = true;
    return;
   }
   else {
    document.getElementsByName(s)[0].disabled = false;
    document.getElementsByName(z)[0].disabled = true;
    return;
   }
  }

Hier das HTML:

<tr>
   <td style="background-color:#FFFFFF;">02
    <select name="s2" size="1" style="width:12em;" style="padding-left:20px;" onChange="chkField('s2','z1')">
         <option> </option>
{$data['s2']}    </select>
   </td>
   <td style="background-color:#FFFFFF;">11
    <select name="n2" size="1" style="width:12em;" style="padding-left:20px;" onChange="chkField('n2','z2')">
         <option> </option>
{$data['n2']}    </select>
   </td>
  </tr>
  <tr>
   <td style="background-color:#FFFFFF;">
    03&nbsp;<input type="text" name="z1" style="width:12em;" maxlenght="63" value="{$data['alt']['z1']}" onFocus="chkInput('s2','z1')" onBlur="chkLeer('s2','z1', this.value)">
   </td>
   <td style="background-color:#FFFFFF;">
    12&nbsp;<input type="text" name="z2" style="width:12em;" maxlenght="63" value="{$data['alt']['z2']}" onFocus="chkInput('n2','z2')" onBlur="chkLeer('n2','z2', this.value)">
   </td>
  </tr>

Anmerkung: das {$data['nx']} sind die von php erzeugten Optionen für die einzelnen <selects>. Diese sind richtig und können als Fehlerquelle ausgeschlossen werden.

Wo liegt mein Fehler?

Für Tipps wäre ich echt dankbar.

MfG
Chris Ross