[JavaScript] Event-Handler im head-Bereich einsetzen

[BF1942 Freak]

Hallo!

Wie kann ich JS Event-Handler im head-Bereich verwenden?
Ich würde gern in einem formular ein angeklicktes feld vervorheben.
wenn ichs mit css mach, gehts ja nur im ff und nicht im ie.

Allerdings möchte ich jetzt auch nicht bei jedem input feld immer onfocus.. blabla... onblur.. blabla.. hineinschreiben.

ich würde gerne im headbereich für alle festlegen, dass die onfocus bsp. an anderen background bekommen sollen. aber wie verwende ich eventhandler im headbereich?

 

[Zweipunktnull]

element.eventHandler = function()
{
    // Hier kommt beliebiger JavaScript-Code hin.
}

 

[BF1942 Freak]

Wieso geht dann der folgende JavaScript-Code nicht?

document.input.onfocus = function()
{
    document.input.style.backgroundColor = '#cccccc';
}

document.input.onblur = function()
{
    document.input.style.backgroundColor = '#ffffff';
}

 

[Keita]

Weil es das Object document.input nicht gibt...

Du brauchst einerseits eine Funktion, die die Initialisierung der Events und deren Handler vornimmt und andererseits eine Intialisierung eines Events, welcher die o.g. Funktion feuert, sobald der DOM-Baum initialisiert ist:

window.onload = function ()
{
  var inputs = document.getElementsByTagName('INPUT');
  for (var i = 0, j = inputs.length; i < j; ++i) {
    inputs[i].onfocus = function () {this.style.backgroundColor = '#CCCCCC';}
    inputs[i].onblur  = function () {this.style.backgroundColor = 'white';}
  }
}

greetings, Keita

 

[BF1942 Freak]

danke. funktioniert.
aber was ist das denn? wenn ich vom feld wieder weggehen, wird der bg zwar wieder weiß, aber trotzdem bleibt das feld dauerhaft verändert (im ie7). der rahmen und alles ist ganz anderes.. ich hab doch nur den bg verändert. wieso ist der rahmen anders?

EDIT: Außerdem funktioniert das script nur im IE7 aber nicht im IE6 oder 5.5..

 

[Keita]

Da ich keinen IE7 habe, kann ich dir leider nicht sagen, was er da fabriziert. Der IE6 kommt jedoch mit dem Code wunderbar zurecht.

greetings, Keita

 

[BF1942 Freak]

ja. ie6 funktioniert. ie5.5 auch. aber beim ie7 spinnts ein wenig...

 

[Keita]

Ich glaube es zwar nicht, aber es könnte durchaus sein, daß der IE7 durch die Zuweisung eines Eventhandlers den Standardhandler überschreibt, in diesem Fall müßtest du mit attachEvent() und addEventListener() arbeiten. Versuch's mal mit:

window.onload = function ()
{
  var inputs = document.getElementsByTagName('INPUT');

  if (window.addEventListener) {
    for (var i = 0, j = inputs.length; i < j; ++i) {
      inputs[i].addEventListener('focus', function () {this.style.backgroundColor = '#CCCCCC';}, false);
      inputs[i].addEventListener('blur', function () {this.style.backgroundColor = 'white';}, false);
    }
  } else if (node.attachEvent) {
    for (var i = 0, j = inputs.length; i < j; ++i) {
      inputs[i].attachEvent('onfocus', function () {this.style.backgroundColor = '#CCCCCC';});
      inputs[i].attachEvent('onblur', function () {this.style.backgroundColor = 'white';});
    }
  }
}

greetings, Keita