Bestimmten <input>-Feldern je nach Event CSS-Stile zuweisen

[David Klein]

Guten Tag zusammen,

nachdem ich weit und breit nichts Passendes gefunden habe (FAQ u.Ä.), versuche ich mein Glück hier.

Meine Funktion (s.u.) soll Folgendes bezwecken: Sie weist jedem Formularelement, in welches der Benutzer Text eingeben kann, einen Style zu. Dies soll in Abhängigkeit der Events onFocus und onBlur geschehen. Nun bin ich mir nicht sicher, wie ich innerhalb der "if"-Anweisung die Events onFocus und onBlur definieren soll. element.focus() bzw. element.blur() setzt ja nur den Fokus bzw. entfernt diesen wieder. Damit wird's also nicht funktionieren.

  
  
function changeBgColor()  
{  
  for (var i = 0; i < document.forms[0].elements.length; i++)  
  {  
    var element = document.forms[0].elements[i];  
  
    /* Nur Texteingabefelder, die nicht deaktiviert sind*/  
    if (  
        (  
         (element.type == "textarea") ||  
         (element.type == "text") ||  
         (element.type == "password")  
        )  
        && (element.disabled == false)  
       )  
    {  
      /* wenn element Fokus erhält => setze backgroundColor weiß */  
      /* wenn element Fokus verliert => setze backgroundColor grün */  
    }  
  }  
}  
  

Wie gesagt, mir ist nicht bekannt, dass ich abfragen kann, ob ein Element gerade den Fokus hat oder ihn gerade verliert, sonst hätte ich innerhalb der Kommentarzeichen ja schon die Lösung in "Klartext". Wenn von euch jemand Rat weiß oder mich "mit der Nase drauf stößt", wäre ich sehr dankbar. Ich erwarte auch keine fertige Lösung...

Mit den besten Grüßen,

David Klein

--

[e-mail]

[Carsten]

Hi David,

du denkst zu kompliziert...

Baue zwei Klassen in CSS für deine Eingabefelder, also z.B.

input.focus{...} und input.blur{...}

Dann baue folgende Funktion in deinen Header ein:

function changeClass(element, classname) {
 if(!element) {
 return
 }
 else {
 element.className = classname
 }
}

Und deine input felder sollten dann so aussehen:

<input type="text" class="blur" onFocus="changeClass(this,'focus')" onBlur="changeClass(this, 'blur')">

Das is alles... nur musst du bei dieser Variante jedesmall onFocus und onBlur in die Felder eintragen.

Gruß

Carsten

[Carsten]

Nochmal Hallo,

ich weiss jetzt nicht so genau ob ich das richtig verstanden habe... Warum gehst du denn alle Felder in der Schleife durch? Um zu schauen ob eins aktiv ist???

Gruß

Carsten

[Maxx]

Hallo David,

Dies soll in Abhängigkeit der Events onFocus und onBlur geschehen. Nun bin ich mir nicht sicher, wie ich innerhalb der "if"-Anweisung die Events onFocus und onBlur definieren soll.

So wie du das geplant hast klappt das nicht. Soweit ich weiß gibt es keine entsprechende Eigenschaft die du abfragen kannst. Oder ich kenne sie nicht. Aber du kannst über die EventListener
addEventListener('focus',...) bzw. addEventListener('blur',...) Methoden hinterlegen die die Hintergrundfarbe entsprechend setzen.

Alles klar?

Grüße,

Jochen

[Maxx]

Nachtrag:

addEventListener('focus',...) bzw. addEventListener('blur',...) Methoden hinterlegen die die Hintergrundfarbe entsprechend setzen.

Der ach so tolle IE, der eine so super javascript Unterstüzung hat, versagt bei den einfachsten Beispielen kläglich:
Ein simples document.FormName.ElemName.addEventListener('focus', gotFocus, false);
wird im IE 6 mit einem "Das Objekt unterstützt diese Eigenschaft oder Methode nicht" quittiert.

Wer sagte da vorhin etwas von einer nicht ausreichenden DHTML-Unterstüzung von Opera?

Grüße,

Jochen

[Carsten]

Der ach so tolle IE, der eine so super javascript Unterstüzung hat, versagt bei den einfachsten Beispielen kläglich:
Ein simples document.FormName.ElemName.addEventListener('focus', gotFocus, false);
wird im IE 6 mit einem "Das Objekt unterstützt diese Eigenschaft oder Methode nicht" quittiert.

Der tolle IE hat eine tolle JScript Unterstützung, das ist nicht das selbe wie Javascript (aber fast). HTML Elementen einen Event zuwiesen und später abfangen ist beim IE etwas komplizierter, aber geht auch!

Und über Opera will ich erst gar nicht herziehen, die wissen selbst was die fürn schei* Programmieren, da ist mir der IE für Mac noch lieber.

[Thomas Meinike]

Hallo,

Ein simples document.FormName.ElemName.addEventListener('focus', gotFocus, false);
wird im IE 6 mit einem "Das Objekt unterstützt diese Eigenschaft oder Methode nicht" quittiert.

Ja, das kann er nicht, aber es gibt attachEvent("onevent",Funktion) als Alternative (das Praefix 'on' ist wichtig). Mittels if()-Abfrage kann man das dann zuweisen.

Wer sagte da vorhin etwas von einer nicht ausreichenden DHTML-Unterstüzung von Opera?

Nunja, Opera hat lange gebraucht (bis Version 7), um die wichtigsten DOM-Features zu uebernehmen, die der IE 5 schon kannte ...

MfG, Thomas

[David Klein]

Ich habe eure Hinweise gelesen und fand sie sehr aufschlussreich. Besten Dank soweit. Nun habe ich etwas herumgestrickt (das trifft's in der Tat) und leider meldet der IE 6 unter Windows einen "Typkonflikt": Zwar setzt er die Hintergrundfarbe des ersten <input>-Felds auf weiß, ohne sie bei onBlur allerdings wieder zurückzusetzen. Alle anderen Felder bleiben wie sie sind... Mozilla 1.6 macht rein gar nichts...

Grüße,

David Klein

  
  
function changeBgColor()  
{  
  
  // ...einige Variablen zur Browserabfrage...  
  
  for (var i = 0; i < document.forms[0].elements.length; i++)  
  {  
    var element = document.forms[0].elements[i];  
  
    function setBgColor(color)  
    {  
      element.style.backgroundColor = color;  
    }  
  
    if (((element.type == "textarea") || (element.type == "text") || (element.type == "password")) && (element.disabled == false))  
    {  
      if (is_ie5up)  // Internet Explorer  
      {  
        element.attachEvent("onfocus", setBgColor("#FFFFFF"));  
        element.attachEvent("onblur", setBgColor("#D6FFF7"));  
      }  
      // element.onfocus = setBgColor("#FFFFFF");  
      // element.onblur  = setBgColor("#D6FFF7");  
      else if (is_nav6up)  // Mozilla und Netscape  
      {  
        element.addEventListener("focus", setBgColor("#FFFFFF"), false);  
        element.addEventListener("blur", setBgColor("#D6FFF7"), false);  
      }  
    }  
  }  
}  
  

--

[e-mail]

[Maxx]

Hallo David,

function changeBgColor()

for (var i = 0; i < document.forms[0].elements.length; i++)
  {
    function setBgColor(color)
    {

Ups, ist das nur beim reinkopieren passiert? Oder ....?
Das ist sowohl unlogisch, als auch syntaktisch völlig verkehrt.

»»     if (is_ie5up)  // Internet Explorer
»»     {
»»       element.attachEvent("onfocus", setBgColor("#FFFFFF"));
»»       element.attachEvent("onblur", setBgColor("#D6FFF7"));

Nein, bitte nicht. Warum fragst du nicht ab, ob die verwendete Methode existiert? Dann ist es völig egal ob IE oder sonstwas.

if (element.attachEvent)
         element.attachEvent(....);

»»     else if (is_nav6up)  // Mozilla und Netscape
»»     {
»»       element.addEventListener("focus", setBgColor("#FFFFFF"), false);

Dito.

Viel Spaß weiterhin.

Jochen

[David Klein]

Guten Abend,

<schnipp>

function changeBgColor()

for (var i = 0; i < document.forms[0].elements.length; i++)
  {
    function setBgColor(color)
    {

Ups, ist das nur beim reinkopieren passiert? Oder ....?
Das ist sowohl unlogisch, als auch syntaktisch völlig verkehrt.

<schnipp>

Ich sollte manchmal besser zweimal schauen, bevor ich etwas poste. Ja, das ist völliger Humbug! Aber aufgefallen ist mir das Ganze in der Tat nicht. Dein Vorschlag zur Umgehung der Browserabfrage ist natürlich besser... Manchmal braucht man einfach nur den Hinweis, welcher Baum im Wald gemeint ist. Besten Dank.

Grüße,

David Klein

--

[e-mail]