Problem: Allen input-Elementen mit der Klasse "eingabe" einen Event-Handler zuweisen

[Basti93]

Guten Tag.

Ich habe folgendes Problem:

Ich möchte allen input-Elementen, die die Klasse "eingabe" besitzen (<input class="eingabe" />), einen Event-Handler zuweisen.
Das soll ein zentraler JavaScript automatisch machen, damit ich den Event-Handler nicht in jedes input-Element einzeln schreiben muss.

Dieser Script sollte vor allem im Internet Explorer 7 und niedriger funktionieren, da ich mit dem Event-Handler eine Schwäche in der CSS-Unterstützung beheben möchte.

Leider kenne ich mich mit JavaScript nicht sonderlich gut aus (nur die Grundlagen), weswegen ich mich sehr freuen würde, wenn jemand mir den Grundaufbau eines solchen Scriptes erstellen könnte - Anpassungen könnte ich dann selber vornehmen (z.B. welcher Event-Handler mit welchen Befehlen).

Vielen Dank schon mal im voraus!

 

[crash]

[email protected] - javascript-q.git/blob - snippets/getElementsByClassName.js

var eingabeFelder = getElementsByClassName("eingabe", document.body);
for (var i = 0, eingabeFeld; eingabeFeld = eingabeFelder[i]; i++) {
    addEvent(eingabeFeld, "click", irgendeineFunktionsReferenz);
}

Das ganze passiert bei, wenn das Dokument geladen wurde, oder das DOM bereit ist. addEvent() gibts dort: design-noir | Webentwicklung | JavaScript | addEvent & removeEvent

 

[Basti93]

Danke schon mal, ich werde das mal ausprobieren.

 

[Basti93]

Leider klappt es nicht so richtig.

Ich habe die beiden JavaScript-Funktionen in die HTML-Datei eingebunden und die Funktion (siehe oben) folgendermaßen angepasst:

var eingabeFelder = getElementsByClassName("eingabe", document.body);
for (var i = 0, eingabeFeld; eingabeFeld = eingabeFelder[i]; i++) {
    addEvent(eingabeFeld, "focus", "style.border='#000 solid 1px'");
}

Der dazugehörige HTML-Code sieht folgendermaßen aus (gekürzt):

<form action="login.php?aktion=login" method="post" class="login">
   <p><label for="benutzername">Benutzername:</label> <input type="text" id="benutzername" name="benutzername" class="eingabe" /></p>
   <p><label for="passwort">Passwort:</label> <input type="password" id="passwort" name="passwort" class="eingabe" /></p>
   <p><input type="submit" value="Login" class="absenden" /></p>
   <ul>
     <li><a href="passwort-vergessen.php">Passwort vergessen</a></li>
     <li><a href="registrieren.php">Registrieren</a></li>
   </ul>
</form>

Der CSS-Code, der im "Normalfall" (bei allen modernen Browsern) den hover-Effekt vornimmt sieht so aus:

.eingabe { background-color: #fff; border: 1px solid #a0a0a0; padding: 0.2em; }
.eingabe:focus { border-color: #000; }

Doch leider klappt es trotz des JavaScriptes nicht im Internet Explorer 7 und niedriger.
Könnte mir einer sagen, wo dabei der Fehler liegt, oder was ich beachten muss?

Danke schon mal im voraus!

 

[crash]

[email protected] - javascript-q.git/blob - snippets/addClass.js

addEvent(eingabeFeld, "focus", function () { addClass(this, "focus"); });

.eingabe:focus, .eingabe.focus { border-color: #000; }