[javascript] Formularfelder ändern

NudelMC

Well-known member
16 Juni 2006
178
5
Hallo, eine kleine Frage zu Javascript am frühen tage um die grauen Zellen in Gang zu bekommen :p

Ich hab 100 Formularfelder, jedes dieser Formularfelder soll bei onFocus die Farbe wechseln, bei onBlur soll es die Farbigkeit wieder verlieren.

Soweit kein prob, allerdings isses mir zu blöd 100 Funktionen oder if else konstrukte zu bauen.

Es muss doch einen weg geben das direkt über den Funktionsaufruf zu Handeln?!

<script type="text/javascript">
function onfocus(feld_suche){
document.form1.VARIABLE AUS DEM FUNKTIONSAUFRUF .style.backgroundColor = "red";
}
</script>

So müsste das ja irgendwie :p
Ich such neben her noch im Javabuch was darüber , wenn ichs erster find post ichs

Danke
Nudel
 
Übergeb this ;)
HTML:
<input onblur="unmark(this);" onfocus="mark(this);" />
PHP:
function mark(obj)
{
  obj.style.backgroundColor="red";
}

function unmark(obj)
{
  obj.style.backgroundColor="white";
}
 
halli hallo...

==> *denk anstoss geb*
evtl nich grad schön... aber es tut ^^
ne, bin zu faul zum nachdenken :D


Code:
<input type="text" id="feld1" onFocus="gotFocus(this);" onBlur="lostFocus(this);">

und dann javascript funktionen
Code:
function gotFocus(obj)
{
   //Funktion bei Focus auf Textfeld
   obj.style.background = "#FF0000"; //Hier deine Wunschfarbe ^^
}

function lostFocus(obj)
{
   //Funktion bei verlassen des Textfeldes
   obj.style.background = "#FFFFFF";  //Hier deine Wunschfarbe ^^
}


lg
acid


Edit: irtgendwie funzt das code - tag net
und hacker war schneller... doof wenn der chef während der antwoprt grad vorbei läuft :D
 
Erstmal würd ich für genau sowas nicht JavaScript nehmen. Da ist das mit CSS um Längen einfacher und effizienter. Stichwort hier wären das Pseudoformat :focus.

Ergänzend zu den bereits erwähnten JavaScript-Varianten mit this, kannst Du auch eine Variante nehmen, die erstmal gar keinen onFocus angibt und den später (beim onload oder so) hinzufügt. Dann kannst Du mittels des auslösenden Events auf das Objekt zugreifen, von dem der Event kam. Sähe dann so aus:
Code:
function addOnFocus() {
  var inputs = document.getElementsByTagName("input");
  for (var idx in inputs) {
    if (inputs[idx].type != "text") {
      continue;
    }
    inputs[idx].onfocus = onfocus;
  }
}

function onfocus(event) {
  if (!event)
    event = window.event;
  var object = event.target?event.target:event.srcElement;

  object.style.backgroundColor = "red";  
}
Sieht verwirrend aus, ist aber echt praktisch. ;)
 
Perfekt das isses !

Vielen Dank für die schnellen Antworten !

EDIT: ich werde die erste variante verwenden, da es kein simples HTMl ist sonder ASP.Net 2.0 gerendeter Code und ich trau dem ganzen friede freude eierkuchen zusammenspiel net :p