Steffen Flämig: Formularfeld "onfocus" einfärben

Hallo,

ich prüfe ein Formular vor dem Abschicken mit JavaScript auf Plausibilität.

Ist ein Feld falsch bzw. nicht ausgefüllt, gibts eine Fehlermeldung und das bzw, die Feld(er) wird/werden rot eingefärbt.

var foo = document.getElementById("fooId");
if (foo.value.length == 0)
{
 foo.style.backgroundColor = "#FF0000";
...
}
So kann man schön sehen, welches Feld man nachbearbeiten muß.
Klick jetzt den Benutzer in das Feld, soll der Hintergrund wieder weiss werden.

foo.setAttribute("onFocus","function(){foo.style.backgroundColor = '#FFFFFF'");

und auch:
foo.setAttribute("onFocus",foo.style.backgroundColor = '#FFFFFF');

machen jedoch nicht das gewünschte.

Hat jemand eine Idee wie ich das Problemchen lösen kann?

Gruß
Steffen

  1. Hallo,

    foo.setAttribute("onFocus","function(){foo.style.backgroundColor = '#FFFFFF'");
    und auch:
    foo.setAttribute("onFocus",foo.style.backgroundColor = '#FFFFFF');
    machen jedoch nicht das gewünschte.

    das ist auch nicht weiter überraschend, denn ein Attribut bzw. eine Eigenschaft onFocus ist dem Objekt bis dato unbekannt und hat keine weitere Bedeutung. Was du meintest, ist vermutlich onfocus.
    Bedenke immer: Javascript ist case-sensitive!

    Übrigens kannst du das gleiche auch "kompatibler" formulieren:
    foo.onfocus = function(){this.style.backgroundColor = '#FFFFFF'};

    So long,
     Martin

    --
    Du kannst dem Leben nicht mehr Tage geben.
    Aber dem Tag mehr Leben.
    1. Hallo,

      foo.setAttribute("onFocus","function(){foo.style.backgroundColor = '#FFFFFF'");
      und auch:
      foo.setAttribute("onFocus",foo.style.backgroundColor = '#FFFFFF');
      machen jedoch nicht das gewünschte.

      das ist auch nicht weiter überraschend, denn ein Attribut bzw. eine Eigenschaft onFocus ist dem Objekt bis dato unbekannt und hat keine weitere Bedeutung. Was du meintest, ist vermutlich onfocus.
      Bedenke immer: Javascript ist case-sensitive!

      Wenn Steffen HTML verwendet spielt das AFAIK keine Rolle, denn setAttribute() setzt in Browsern Attribute, keine Eigenschaften und Attribute sind nicht case-sensitive.

      Das das nicht funktioniert, liegt im ersten Beispiel daran, dass die function() dort nicht hingehört und im 2. Beispiel fehlen 1. Die Anführungsstriche und 2. dürfte foo nicht mehr verfügbar sein.

      mfg. Daniel

  2. Hallo,

    So kann man schön sehen, welches Feld man nachbearbeiten muß.
    Klick jetzt den Benutzer in das Feld, soll der Hintergrund wieder weiss werden.

    foo.setAttribute("onFocus","function(){foo.style.backgroundColor = '#FFFFFF'");

    und auch:
    foo.setAttribute("onFocus",foo.style.backgroundColor = '#FFFFFF');

    machen jedoch nicht das gewünschte.

    Attribute sind keine Funktionen. Der Browser konvertiert die on*-Attribute jedoch in Eventhandler, die intern dann als Funktionen verfügbar sind. Deshalb ist es unsinnig, erst wieder Attribute zu erstellen.

    Hat jemand eine Idee wie ich das Problemchen lösen kann?

      
    foo.onclick = function(){  
    this.style.backgroundColor = '#FFFFFF'; //du musst this verwenden, weil foo später ggf. nicht mehr zur Verfügung steht  
    }
    

    mfg. Daniel

    1. Hallo,

      foo.onclick = function(){
      this.style.backgroundColor = '#FFFFFF'; //du musst this verwenden, weil foo später ggf. nicht mehr zur Verfügung steht
      }

        
      this ist sicher am sinnvollsten, trotzdem ist bla bei einer solchen Konstruktion immer auch in der Funktion verfügbar:  
      bla.irgendwas = function () { alert(bla); };  
      Das liegt daran, dass die Funktion eine [Closure](http://aktuell.de.selfhtml.org/artikel/javascript/organisation/#closures) darstellt.  
      Die Frage ist eher, ob foo auch tatsächlich zur Zeit der Ausführung noch auf dasselbe Objekt zeigt (vielleicht wurde es überschrieben), daher ist this sicherer und einfacher.  
        
      Mathias