OnBlur vor onFocus ???

[Chris Ross]

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

[globe]

n'abend,

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

if( selectedIndex == 0 )  
  alert('ja, du hast das erste Element ausgewählt');  
  
if( selectedIndex == -1 )  
  alert('du hast noch kein Element ausgewählt!');

nachzulesen hier

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.

Es gibt auch noch onkey -up, -down, -press, welche man für deine Ziele missbrauchen könnte. (Event-Handler)

[...] sobald ich in das Input-Feld klicke (onFocus), dann wird onBlur ausgeführt, und erst DANACH onFocus?!

Seltsamerweise scheint das tatsächlich so zu sein. Zumindest behauptet das ein sehr simpler test von eben...

Hier mein Quelltext:
[...]

html-elemente sowie attribute möchten kleingeschrieben werden. "onClick" => "onclick". Das ist zwar keineswegs der Fehler, wäre allerdings korrekt und erleichtert späteren Umstieg auf XHTML... etc etc

weiterhin schönen abend...

[Chris Ross]

Hi auch,

[...] sobald ich in das Input-Feld klicke (onFocus), dann wird onBlur ausgeführt, und erst DANACH onFocus?!

Seltsamerweise scheint das tatsächlich so zu sein. Zumindest behauptet das ein sehr simpler test von eben...

Ja, wirklich seltsam! Ich kann mir auch keinen Reim drauf machen.

html-elemente sowie attribute möchten kleingeschrieben werden. "onClick" => "onclick". Das ist zwar keineswegs der Fehler, wäre allerdings korrekt und erleichtert späteren Umstieg auf XHTML... etc etc

SELFHTML selbst schreibt Groß/Kleinschrift in seinen Beispielen. Deshalb habe ich mir das auch angewöhnt. Was in Bezug auf XHTML ist, weiß ich nicht, da ich mich damit noch gar nicht beschäftigt habe. Trotzdem werde ich Deinen Tipp beherzigen. :)

MfG
Chris Ross

[globe]

n'abend,

SELFHTML selbst schreibt Groß/Kleinschrift in seinen Beispielen. Deshalb habe ich mir das auch angewöhnt.

Auch SELFHTML ist nicht unfehlbar. Dass die Dokumentation veraltet ist und vorallem veraltete Werte vermittelt ist bekannt. Viele der Beispiele sprechen auch nicht gerade eine sonderlich schöne Sprache ;)

weiterhin schönen abend...

[Struppi]

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?!

ist in meinen Augen auch logisch (oder ich habe was mißverstanden), wenn du in einem Feld bist und dann auf ein anderes Feld klickst, kommt erst der blur Event des alten Feldes und dann der focus Event des Neuen.

Struppi.

[Chris Ross]

(oder ich habe was mißverstanden)

Ja :)

[Struppi]

(oder ich habe was mißverstanden)

Ja :)

Dann verstehe ich das nicht:

».... Sobald ich in das Input-Feld klicke (onFocus), dann wird onBlur ausgeführt, und erst DANACH onFocus?!

Das ist logisch, dass das passiert.

Struppi.

[Chris Ross]

Hi Struppi,

Dann verstehe ich das nicht:

».... Sobald ich in das Input-Feld klicke (onFocus), dann wird onBlur ausgeführt, und erst DANACH onFocus?!

Das ist logisch, dass das passiert.

Logisch ist das nicht, weil das Feld zwangsläufig erst den Focus bekommt und erst DANACH verlassen wird.

Mein Problem ist, dass das Feld das onBlur schon ausführt, BEVOR es überhaupt den Focus (onFocus) hatte. Wenn ich reinklicke, um was einzugeben, müsste als 1. das onFocus ausgeführt werden und onBlur erst, wenn ich das Feld wieder verlasse.

Jetzt klarer? :)

MfG
Chris Ross

[Struppi]

».... Sobald ich in das Input-Feld klicke (onFocus), dann wird onBlur ausgeführt, und erst DANACH onFocus?!

Das ist logisch, dass das passiert.

Logisch ist das nicht, weil das Feld zwangsläufig erst den Focus bekommt und erst DANACH verlassen wird.

Mein Problem ist, dass das Feld das onBlur schon ausführt, BEVOR es überhaupt den Focus (onFocus) hatte. Wenn ich reinklicke, um was einzugeben, müsste als 1. das onFocus ausgeführt werden und onBlur erst, wenn ich das Feld wieder verlasse.

Jetzt klarer? :)

Ja, aber die Beobachtung ist falsch:

<form action="#">  
<input name="a"  
onfocus="this.form.text.value += 'focus: '+ this.name +'\n';"  
onblur="this.form.text.value += 'blur: '+ this.name +'\n';"  

>  

<input name="b"  
onfocus="this.form.text.value += 'focus: '+ this.name +'\n';"  
onblur="this.form.text.value += 'blur: '+ this.name +'\n';"  

>  

<textarea name="text"></textarea>  
</form>  

MfG
Chris Ross

Struppi.

[globe]

n'abend,

Ja, aber die Beobachtung ist falsch:

Ich machte da eine andere Beobachtung ;) folgendes Beispiel ist recht simpel - du wirst überrascht sein, dass (zumindest Fx2) zuerst einen blur wirft und erst dann zum focus kommt.

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
<title>New document</title>  
<script type="text/javascript">  
  
window.onload = function()  
{  
 var h = document.getElementById( 'bla' );  
 h.onfocus = function() { alert( 'focus!' ); };  
 h.onblur = function() { alert( 'blur!' ); };  
}  
  
</script>  
</head>  
<body>  
<input type="text" id="bla">  
</body>  
</html>

weiterhin schönen abend...

[globe]

n'abend,

Ich machte da eine andere Beobachtung ;) folgendes Beispiel ist recht simpel - du wirst überrascht sein, dass (zumindest Fx2) zuerst einen blur wirft und erst dann zum focus kommt.

Tatsächlich verhält sich nur Firefox etwas merkwürdig. Opera und IE6 verhalten sich wie erwartet (es wird nur "focus!" angezeigt).

weiterhin schönen abend...

[Struppi]

Ja, aber die Beobachtung ist falsch:

Ich machte da eine andere Beobachtung ;) folgendes Beispiel ist recht simpel - du wirst überrascht sein, dass (zumindest Fx2) zuerst einen blur wirft und erst dann zum focus kommt.

ich bin nicht überrascht.

window.onload = function()
{
var h = document.getElementById( 'bla' );
h.onfocus = function() { alert( 'focus!' ); };
h.onblur = function() { alert( 'blur!' ); };
}

Mit dem alert entziehst du dem Element den Focus. D.h. in dem Moment wo du ein Element Fokusierst rufst du gleichzeitig den Blur event auf. Das unterschiedliche Verhalten erklärt sich aus den unrterschiedlichen Bubbling Strategien der Browser.

Struppi.

[Chris Ross]

Hi Struppi,

Mit dem alert entziehst du dem Element den Focus. D.h. in dem Moment wo du ein Element Fokusierst rufst du gleichzeitig den Blur event auf. Das unterschiedliche Verhalten erklärt sich aus den unrterschiedlichen Bubbling Strategien der Browser.

Stimmt! In dem Moment, wo eine Meldung (alert) kommt, ist der Focus weg. Das ist mir aufgefallen, als ich zwischen dem browser und dem editor hin und her schaltete. Als das Browserfenster wieder aufgerufen wurde, kam plötzlich der alert, obwohl ich nichts gemacht hatte - ausser, dass beim Umschalten zu Editor der Focus verloren ging.

Naja - jetzt hab ich wenigstens eine Erklärung für das (richtige) Verhalten.

Ich habs jetzt anders gelöst:

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

und im html:

  
  <tr>  
   <td style="background-color:#FFFFFF;">02  
    <select name="s2" size="1" style="width:12em;" style="padding-left:20px;" onChange="chkSelect('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="chkSelect('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']}" onChange="chkInput('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']}" onChange="chkInput('n2','z2', this.value)">  
   </td>  
  </tr>  

So funktioniert es auch. :)

Danke für Eure Hilfe!

MfG
Chris Ross

[globe]

n'abend,

Mit dem alert entziehst du dem Element den Focus. D.h. in dem Moment wo du ein Element Fokusierst rufst du gleichzeitig den Blur event auf. Das unterschiedliche Verhalten erklärt sich aus den unrterschiedlichen Bubbling Strategien der Browser.

und wieder bin ich dem (nicht sonderlich intuitiven) capturing zum opfer gefallen.. *freude*

dass alert() den focus entzieht hab ich natürlich nicht bedacht. hmpf.

weiterhin schönen abend...