nicht angemeldet
Problem mit Rahmenfarbe von Div ändern
Guten Abend,
Ich bette Eingabefelder von Formularen zur pixelgenauen Positionierung in DIV-Bereiche ein:
<div id="Container_Formular_Gaestebuch">
<div id="Eingabefeld_1">
<input
class="Eingabefeld"
name="Name"
</div>
... weitere Eingabefelder ...
</div>
Der umgebende DIV-Container beinhaltet die Hintergrundgrafik der Formulare.
Um den Focus auf ein Eingabefeld optisch verhorzuheben, will ich die Rahmenfarbe des umgebenden DIV-Bereiches ("Eingabefeld_1") ändern:
<div id="Eingabefeld_1">
<input
class="Eingabefeld"
name="Name"
onfocus="Rahmenfarbe ('Eingabefeld_1', 'an');"
onblur="Rahmenfarbe ('Eingabefeld_1', 'aus');">
</div>
Das zugehörige JS-Script sieht folgendermassen aus:
function Rahmenfarbe (ID, Modus)
{
var Farbe = "";
if (Modus == "an")
Farbe = "000000";
else
Farbe = "ffffff";
if (document.all)
eval ('document.all.' + ID + '.style.borderColor="' + Farbe + '"');
if (document.layers)
eval ('document.layers.' + ID + '.borderColor="' + Farbe + '"');
}
Mein Problem ist nun, dass sich die Rahmenfarbe aber nicht ändert, ich erhalte aber auch keine Fehlermeldung.
Was ist an meinem Script falsch.
Schon mal vielen Dank für Eure Hilfe.
Gruss, Enrico
-
Hallo,
Für Browser, die CSS halbwegs gut verstehen, brauchst du dafür überhaupt
kein Javascript. CSS genügt:#foo { border: 1px #000 solid; }
#foo:focus { border-color: red; }Javascript kannst du dann für den IE benutzen, aber eher ohne eval() zu
verwenden:function rahmenfarbe(id,modus) {
var farbe;
if (modus == 0) farbe = "#000";
else farbe = "#fff";
document.getElementById(id).style.borderColor = farbe;
}Die Abfrage auf 'document.layers' kannst du dir wohl ganz sparen, da NS4
die Rahmen vermutlich sowieso nicht darstellt.Ein Aufruf sähe so aus:
<... onfocus="rahmenfarbe('foo',1);" onblur="rahmenfarbe('foo',0);" ... />
Anmerkungen zu deinem Code:
<div id="Container_Formular_Gaestebuch">
Unterstriche in IDs oder Klassennamen sind nicht empfehlenswert.
onfocus="Rahmenfarbe ('Eingabefeld_1', 'an');"
Wozu die Backslashes?
Farbe = "000000";
000000 ist kein gültiger Farbwert.
Gruß, Jan
-
Hallo Jan,
erstmal Danke für Deine schnelle Antwort, aber leider will es noch nicht so funktionieren wie ich es beabsichtige.
Ich habe jetzt die CSS-Definitionen der umgebenden DIV-Bereiche wie folgt notiert:
#Eingabefeld_1,
#Eingabefeld_2,
#Eingabefeld_3,
#Eingabefeld_4,
{
border: none;
position: absolute;
right: 2px;
}#Eingabefeld_1:focus,
#Eingabefeld_2:focus,
#Eingabefeld_3:focus,
#Eingabefeld_4:focus
{
border: 2px solid black;
}Wozu die Backslashes?
Ich gebe den Code innerhalb einer PHP-Datei über echo aus, deswegen musste ich sie maskieren.
Enrico
-
Hallo Enrico,
ich glaube ja, da du die umgebenden Divs umrahmen willst und nicht die Inputfelder, um deren Fokus es geht, führt doch kein Weg um JS vorbei, nicht nur beim IE
Gruß Gernot
Meine Lösung wie folgt:
<html>
<head>
<title>FocusRahmen</title>
<style type="text/css">
<!--
.rahmen {
border:solid 1px #000;
width:400px;
height:100px;
text-align:center;
margin:10px;
}input {
position:relative;
top:40px;;
width:200px;
height:20px;
}-->
</style>
<script language="JavaScript">
<!--
function focblur (x) {
if(x.parentNode.style.borderColor=="#f00") {
x.parentNode.style.borderColor="#000";
} else {
x.parentNode.style.borderColor="#f00";
}
}
//-->
</script>
<noscript></noscript>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<form action="" method="" target="">
<div class="rahmen"><input onFocus="focblur(this)" onBlur="focblur(this)" type="Text" name="" value="" size="" maxlength=""></div>
<div class="rahmen"><input onFocus="focblur(this)" onBlur="focblur(this)" type="Text" name="" value="" size="" maxlength=""></div>
</form>
</body>
</html>-
Hallo nochmal,
ich sehe gerade, mit der Funktion scheint es bei Mozilla und Opera Problenme beim Zurückwechseln zur Ursprungsfarbe zu geben, weiß der Teufel wieso:
function focblur (x) {
if(x.parentNode.style.borderColor=="#f00") {
x.parentNode.style.borderColor="#000";
} else {
x.parentNode.style.borderColor="#f00";
}
}So (ohne die Funktion) geht es komischerweise:
<form action="" method="" target="">
<div class="rahmen"><input onFocus="this.parentNode.style.borderColor='#f00'" onBlur="this.parentNode.style.borderColor='#000'" type="Text" name="" value="" size="" maxlength=""></div>
<div class="rahmen"><input onFocus="this.parentNode.style.borderColor='#f00'" onBlur="this.parentNode.style.borderColor='#000'" type="Text" name="" value="" size="" maxlength=""></div>
</form>Gruß Gernot
-
Hallo Gernot,
ich sehe gerade, mit der Funktion scheint es bei Mozilla und Opera Problenme beim Zurückwechseln zur Ursprungsfarbe zu geben, weiß der Teufel wieso:
Opera speichert die Farbe als 6-stelligen Code (also #ff0000) und Firefox als »rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0)« (ein »x.value = x.parentNode.style.borderColor;« am Anfang der Funktion verrät das).
Grüße aus Nürnberg
Tobias-
Hallo Tobias,
ich sehe gerade, mit der Funktion scheint es bei Mozilla und Opera Problenme beim Zurückwechseln zur Ursprungsfarbe zu geben, weiß der Teufel wieso:
Opera speichert die Farbe als 6-stelligen Code (also #ff0000) und Firefox als »rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0)« (ein »x.value = x.parentNode.style.borderColor;« am Anfang der Funktion verrät das).Ist ja wieder mal interessant, dass an dieser Stelle jeder wichtige Browsertyp sein eigenes Süppchen kocht.
Ich habe es inzwischen auch mit zwei getrennten Funktionen für die beiden Events ausprobiert. War eigentlich klar, dass es so dann auch gehen muss:
function focuss (x) {
x.parentNode.style.borderColor="#f00";
}function blurr (x) {
x.parentNode.style.borderColor="#000";
}Gruß Gernot
-
-
-
-
-
-
Привет, Enrico!
Ich bette Eingabefelder von Formularen zur pixelgenauen Positionierung in DIV-Bereiche ein:
Warum? (Fast) jedes HTML-Element lässt sich positionieren, wobei eine relative Positionierung in der Regel besser ist als eine pixelgenaue.
Der umgebende DIV-Container beinhaltet die Hintergrundgrafik der Formulare.
Warum weist du den Hintergrund nicht dem form-Element zu?
Um den Focus auf ein Eingabefeld optisch verhorzuheben, will ich die Rahmenfarbe des umgebenden DIV-Bereiches ("Eingabefeld_1") ändern:
Du kannst auch die Rahmenfarbe des Eingabefeldes ändern.
<div id="Eingabefeld_1">
<input
class="Eingabefeld"
name="Name"
onfocus="Rahmenfarbe ('Eingabefeld_1', 'an');"
onblur="Rahmenfarbe ('Eingabefeld_1', 'aus');">Warum maskierst du die Anführungszeichen innerhalb der JavaScript-Anweisungen?
</div>
Das zugehörige JS-Script sieht folgendermassen aus:
function Rahmenfarbe (ID, Modus)
{
var Farbe = "";if (Modus == "an")
Farbe = "000000";So geht's: Farbe="#000000";
^else
Farbe = "ffffff";Siehe oben.
if (document.all)
eval ('document.all.' + ID + '.style.borderColor="' + Farbe + '"');Warum so kompliziert?
document.all[ID].style.borderColor=Farbe;
if (document.layers)
eval ('document.layers.' + ID + '.borderColor="' + Farbe + '"');Siehe oben.
document.layers[ID].borderColor=Farbe;
}
Und warum verwendest du überhaupt document.all und document.layers und nicht stattdessen DOM-konformes JavaScript?
Mein Problem ist nun, dass sich die Rahmenfarbe aber nicht ändert, ich erhalte aber auch keine Fehlermeldung.
Du solltest aber doch eine JavaScript-Konsole haben.
Пока!
Sven aus Bonn--
Do it yourSELF 'cause SELFmade is bestmade.
Selfcode: ie:% fl:( br:^ va:} ls:[ fo:) rl:( n4:{ ss:| de:> js:| ch:? mo:} zu:)
Selfcode dekodieren - Selfcode-Info