nicht angemeldet
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