Powl: input und textarea: hover-focus Effekt für IE

SELF-Forum

input und textarea: hover-focus Effekt für IE

Powl
– Informationen zu den Bewertungsregeln

Hallo,

für ein Formular habe ich in CSS für input und textarea :hover und :focus duch eine andere Hintergrundfarbe hervorgehoben. Das funktioniert in Browsern auch wie gewünscht. Nun möchte ich gerne den Effekt für den IE auch einbauen.
Da denke ich werde ich um JS nicht herumkommen. Ich bin soweit gediehen, daß ich mittels event-handler
onmousover= und onfocus= im tag notiert diesen Effekt realisieren könnte. Es wäre mir aber lieber das JS nur für den IE laden zu lassen. Da ich für IE mittels:
<!--[if lt IE 7]>
    <link rel="stylesheet" media="screen" type="text/css" href="css/IElt7.css" />
<![endif]-->
sowieso ein getrenntes stylesheet einbinde, könnte ich dort doch einfach:
<script type="text/javascript" src="inputhighlight.js"></script>
einfügen, richtig?
Muß ich dann noch im body tag mittels onload die funktionen aufrufen?
Oder doch im jeweiligen input tag onmouseover="inputhighlight()" aufrufen?
Kann man eventhandler auch kombinieren? Z. B. onmouseover, onfocus="inputhighlight()" ?

Gesetzt den Fall ich hätte also eine JS Datei eingebunden. Was müßte ich für den gewünschten Effekt leisten? Meine Überlegung bisher:

  1. Das Document nach input und textarea tags durchsuchen.
    Ich denke mit
    var tags = document.getElementsByTagName('input', 'textarea')
    (ist das zulässig zwei tag Namen zu nennen?)
    müßte ich die Elemente in ein Array schreiben.

Dann müßte ich prüfen, ob Elemente dieses Arrays focus oder mouseover haben? Falls Ja Hintergrund hervorheben und falls Nein Hintergrund transparent darstellen.

Ist das der gangbare Weg, oder ist es auch einfacher Möglich.
Ich kenne leider die Syntax in JS auch kaum. Im Moment beschäftige ich mich auch eher ein wenig mit PHP, von daher komme ich auch "gerne" mit den Schreibweisen durcheinander.

Wäre das ähnlich wie:

if (array[] = mouseover or array[] = focus) {
  setmark();
}
else {
  unsetmark();
}

Dann müßte ich noch in den Funktionen setmark() die Hintergrundfarbe auf einen Wert einstellen lassen und bei unsetmark() die Hintergundfarbe auf transparent einstellen.
Wie könnte man das erreichen, einfach mit
BgColor="#FFFFFF";
oder ähnlich? Oder muß man mit document.write arbeiten. Wahrscheinlich eher nicht, das das Dokument ja schon geschrieben ist?
Mit Sicherheit habe ich da Syntaxfehler eingebaut. Aber ist das im Prinzip so der richtige Ansatz?

Vielen Dank für Eure Hilfe

^da Powl

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. input und textarea: hover-focus Effekt für IE

    Axel Richter
    +2 Informationen zu den Bewertungsregeln

    Hallo,

    für ein Formular habe ich in CSS für input und textarea :hover und :focus duch eine andere Hintergrundfarbe hervorgehoben. Das funktioniert in Browsern auch wie gewünscht. Nun möchte ich gerne den Effekt für den IE auch einbauen.
    Da denke ich werde ich um JS nicht herumkommen.

    Ja, ein gutes Beispiel um zu zeigen, wie mächtig CSS ist und welche Möglichkeiten noch in ihm stecken, wenn man es denn endlich auch im IE lassen würde.

    Zu Deinem Problem:
    Eventhandler lassen sich auch im externen JavaScript übergeben. Dazu gehören [HTMLElement].onxyz, genau wie window.onload. Das Prinzip ist, das HTML-Element anzusprechen und dessen onload, onmouseover, onmouseout, oxyz - Eigenschaft eine Funktionsreferenz zuzuweisen. Das kann ein Name einer zuvor deklarierten Funktion sein, aber auch eine Anweisung

      
var myFunction = function() {alert("Hallo Welt");};

    Beispiel:

      
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>CSS Nachbau mit JavaScript</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
<!--  
input[type="text"]:hover, input[type="text"]:focus {background-color:#FF0;}  
textarea:hover, textarea:focus {background-color:#FF0;}  
-->  
</style>  
<!--[if IE]>  
<script type="text/javascript">  
function TextInputAndTextareaHoverAndFocus() {  
 var myForms = document.forms;  
 for (var f = 0; f < myForms.length; f++) {  
  var myInputs = myForms[f].getElementsByTagName("INPUT");  
  for (var i = 0; i < myInputs.length; i++) {  
   if(myInputs[i].type == "text") {  
    myInputs[i].onmouseover = function() {this.style.backgroundColor="#FF0"};  
    myInputs[i].onfocus = function() {  
     this.onmouseover();  
     this.onmouseout = function() {};  
    };  
    myInputs[i].onmouseout = function() {this.style.backgroundColor=""};  
    myInputs[i].onblur = function() {  
     this.onmouseout = function() {this.style.backgroundColor=""};  
     this.onmouseout();  
    };  
   }  
  }  
  var myTextAreas = myForms[f].getElementsByTagName("TEXTAREA");  
  for (var i = 0; i < myTextAreas.length; i++) {  
   myTextAreas[i].onmouseover = function() {this.style.backgroundColor="#FF0"};  
   myTextAreas[i].onfocus = function() {  
    this.onmouseover();  
    this.onmouseout = function() {};  
   };  
   myTextAreas[i].onmouseout = function() {this.style.backgroundColor=""};  
   myTextAreas[i].onblur = function() {  
    this.onmouseout = function() {this.style.backgroundColor=""};  
    this.onmouseout();  
   };  
  }  
 }  
}  
window.onload = TextInputAndTextareaHoverAndFocus;  
</script>  
<![endif]-->  
</head>  
<body>  
<form action="#" method="get">  
<p><input type="Text" name="t1" value="" size="20" maxlength="20"></p>  
<p><textarea name="ta1" cols="50" rows="5"></textarea></p>  
<p><input type="Radio" name="r1" value="vr1"><input type="Radio" name="r1" value="vr2"></p>  
<p><input type="Submit" name="ok" value="OK"></p>  
</form>  
<form action="#" method="get">  
<p><input type="Text" name="t1" value="" size="20" maxlength="20"></p>  
<p><textarea name="ta1" cols="50" rows="5"></textarea></p>  
<p><input type="Radio" name="r1" value="vr1"><input type="Radio" name="r1" value="vr2"></p>  
<p><input type="Submit" name="ok" value="OK"></p>  
</form>  
</body>  
</html>

    viele Grüße

    Axel

    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln

    1. input und textarea: hover-focus Effekt für IE

      Powl
      – Informationen zu den Bewertungsregeln

      Hallo Axel,

      WOW, vielen Dank, daß hatte ich ehrlich nicht erwartet. _Das_ es funktioniert sehe ich, aber ich werde mich noch genauer damit beschäftigen, weil ich auch _genau_ wissen will, _wie_ und _warum_.
      Ich denke aber das werde ich hinbekommen.

      Einiges habe ich schon verstanden. Im Prinzip war ich ja so weit von der Lösung des Ablaufs nicht entfernt. Ich hätte sicherlich versucht nur ein Array zu bilden und wäre daran gescheitert. Aber gut ein Array für input und eins für textarea. Ordnung muß sein ;)

      Ist aber auch nicht so einfach Scriptsprachen zu erlernen, finde ich. Ein falsches Zeichen und man sucht sich den Wolf warum es nicht funktioniert. Wie im richtigen Leben...

      Ich danke Dir aber sehr herzlich, Du hast mir sehr geholfen.

      Einen schönen Tag
      ^da Powl

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. input und textarea: hover-focus Effekt für IE

        Axel Richter
        – Informationen zu den Bewertungsregeln

        Hallo,

        WOW, vielen Dank, daß hatte ich ehrlich nicht erwartet. _Das_ es funktioniert sehe ich, aber ich werde mich noch genauer damit beschäftigen, weil ich auch _genau_ wissen will, _wie_ und _warum_.
        Ich denke aber das werde ich hinbekommen.

        Hier noch einige Quellen für spezielle Sachen, die ich benutzt habe, alle aus http://de.selfhtml.org/javascript/index.htm, mit Hinweisen zu weiteren Quellen:

        HTMLDocument.forms (HTMLDocument aus DOM HTML http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-26809268)

        Element.getElementsByTagName (Element aus DOM Core http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-745549614)

        this (siehe auch: http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide -> http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References)

        HTMLElement.style (HTMLElement aus DOM HTML http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-58190037 mit Verweis auf ElementCSSInlineStyle in DOM CSS http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-ElementCSSInlineStyle)

        Style-Eigenschaften

        Einiges habe ich schon verstanden. Im Prinzip war ich ja so weit von der Lösung des Ablaufs nicht entfernt. Ich hätte sicherlich versucht nur ein Array zu bilden und wäre daran gescheitert. Aber gut ein Array für input und eins für textarea. Ordnung muß sein ;)

        Die "Arrays" habe ich aber nicht erzeugt. Sie sind Rückgabewerte von HTMLDocument.forms bzw. Element.getElementsByTagName. Es sind auch keine Arrays, sondern Collections. Diese können zwar so ähnlich wie Arrays durchlaufen werden, haben aber spezielle Array-Methoden, wie Array.sort() z.B., nicht. HTMLDocument.forms ist eine HTMLCollection. Element.getElementsByTagName erzeugt eine NodeList. Solche Collections sind Objekte, wie sie in SELFHTML als "Assoziative Arrays" beschrieben werden.

        viele Grüße

        Axel

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln