Farbe von Formularfelder

[Christian Weihermüller]

Guten Tag,

ich möchte die Hintergrundfarbe von Formularfeldern (input) verändern (per Javascript), wenn auf ein Feld geklickt wird. Kennt jemand den benötigten Befehl / Script?

Vielen Dank schonmal im Vorraus,
Christian Weihermüller

[wahsaga]

hi,

ich möchte die Hintergrundfarbe von Formularfeldern (input) verändern (per Javascript), wenn auf ein Feld geklickt wird. Kennt jemand den benötigten Befehl / Script?

das geht auch per CSS, mit der pseudoklasse :focus.

nur für den shIEtbrowser brauchst du mal wieder eine js-extrawurst, weil er :focus nicht für inputfelder interpretiert.

sieh dir hier http://selfhtml.teamone.de/javascript/objekte/style.htm an, wie du style-angaben mit JS dynamisch ändern kannst, und kombiniere dies mit dem eventhandler onFocus im input-feld.

gruss,
wahsaga

[sschumann]

ich möchte die Hintergrundfarbe von Formularfeldern (input) verändern (per Javascript), wenn auf ein Feld geklickt wird. Kennt jemand den benötigten Befehl / Script?

Genauso, wie die Änderung aller anderen Style-Attributierungen. Der Einfachheit halber bieten sich focus und blur als Handler an.

[Tobias Kloth]

Hallo Christian,

ich möchte die Hintergrundfarbe von Formularfeldern (input)

welcher type input?

verändern (per Javascript), wenn auf ein Feld geklickt wird. Kennt jemand den benötigten Befehl / Script?

du möchtest bei Focus auf das Element (onfocus) über das Objekt style (http://selfhtml.teamone.de/javascript/objekte/style.htm) auf die Eigenschaft 'backgroundColor' dieses Elements (this) zugreifen (und beim Verlassen des Feldes (onblur) die Farbe wieder zurücksetzen) - so, und jetzt darfst du die Trümmer zusammenkleben :-)

Einfacher geht das ganze natürlich mit css:
input:focus { background-color:#0F0; }
 - nur macht der IE mal wieder nicht mit ...

Grüße aus Nürnberg
Tobias

[Christian Weihermüller]

hiho,

du möchtest bei Focus auf das Element (onfocus) über das Objekt style (http://selfhtml.teamone.de/javascript/objekte/style.htm) auf die Eigenschaft 'backgroundColor' dieses Elements (this) zugreifen (und beim Verlassen des Feldes (onblur) die Farbe wieder zurücksetzen) - so, und jetzt darfst du die Trümmer zusammenkleben :-)

nein... :-)

also.. ich habe ein input

+---------+
|         |
+---------+

so..
dieses input-feld ist auf readonly gesetzt. wenn das fedl angeklickt wird, wird ein javascript ausgelöst,der verschiedene andere sachen macht. zusätzlich dazu soll er die farbe des feldes ändern. und die soll auch bleiben, egal was dann passiert.
und das sollte möglichst per javascript funktionieren bzw. per javascript ausgelöst werden...

so meinte ich das ;-)

könnt ihr mir bei der genaueren beschreibung helfen??

cu
christian

[Tobias Kloth]

Hallo Christian,

dieses input-feld ist auf readonly gesetzt. wenn das fedl angeklickt wird, wird ein javascript ausgelöst,der verschiedene andere sachen macht. zusätzlich dazu soll er die farbe des feldes ändern. und die soll auch bleiben, egal was dann passiert.

wie rufst du denn die Funktion die "verschiedene andere sachen macht" auf? Häng das was ich beschrieben habe doch einfach noch an deinen Funktionsaufruf dran (mit einem ; abgetrennt).

Grüße aus Nürnberg
Tobias

[Christian Weihermüller]

Hi,

ok thx, das funktioniert erstmal. jetzt kommt aber nochwas dazu: wie kann ich über einen anderen javascript die farbe wieder zurücksetzen? (dieser javascript wird NICHT überdas klicken auf dieses feld ausgeführt, sondern ist in einem anderen javascript integriert, der z.b. durch das klicken auf einen link ausgeführt wird).

probiert hab ichs mit
eingabe.ta.style.backgroundColor = "#111111";
wobei eingabe der name meines formulares, ta der name des feldes und 111111 die ursprüngliche farbe des feldes ist.
so funktionierts aber net.

Viele Grüße,
Christian

[Tobias Kloth]

Hallo Christian,

eingabe.ta.style.backgroundColor = "#111111";

mhh... versuch mal noch ein "document." davor zu stellen - wenn das auch nicht funktioniert musst du wohl einen etwas größeren Codeteil posten oder besser irgendwo hochladen und einen Link posten.

so funktionierts aber net.

was heißt funktioniert nicht? Gibt es eine Fehlermeldung? wenn ja, welche (aber bitte eine aussagekräftige, und nicht die vom IE)?

Grüße aus Nürnberg
Tobias

[Christian Weihermüller]

<script type="text/javascript">
<!--
function putin(w){
absatz=document.eingabe.ta.value=w; document.eingabe.ta.focus();

document.eingabe.ta.style.backgroundColor = "red";

}
</script>
</head>
<body>
<form action="aufstellung.php" method="post" name="eingabe">
<input type="text" name="ta" readonly onfocus='this.style.backgroundColor = "yellow";' class="field"><input type="button" value="Einsetzen" onclick='javascript:put("test");' class="field">
</body>

so ich hab des unwichtig rausgenommen..
vielelicht bringts ja was ;)

also kurze erklärung: wenn auf das feld geklickt wird, soll es eine andere farbe bekommen. wenn dann auf den button gedrückt wird, soll es die ausgangsfarbe bekommen

hoffe es is so verständlich ;)

cu
christian

[Tobias Kloth]

Hallo Christian,

<script type="text/javascript">
<!--

lass diesen Kommentaranfang mal weg.

<input [...] onclick='javascript:put("test");'>

mal abgesehen davon, dass 'javascript:' in Event-Handlern nichts zu suchen hat, rufst du hier die Funktion put() auf - definiert hast du aber nur die Funktion putin() - was dir aber die Javascriptkonsole auch hätte sagen können ...

Grüße aus Nürnberg
Tobias

[Christian Weihermüller]

<!--
lass diesen Kommentaranfang mal weg.

ok

<input [...] onclick='javascript:put("test");'>
mal abgesehen davon, dass 'javascript:' in Event-Handlern nichts zu suchen hat, rufst du hier die Funktion put() auf - definiert hast

uuuuuuuuups
des muss
<input [...] onclick='javascript:putin("test");'>
heißen.. funktioniert aba imma noch net .. :-/

cu
christian

[Tobias Kloth]

Hallo Christian,

<input [...] onclick='javascript:putin("test");'>
heißen.. funktioniert aba imma noch net .. :-/

mit diesen Änderungen funktioniert es bei mir (auch wenn das "javascript:" immernoch falsch ist) - lade mal eine Testseite hoch.

Grüße aus Nürnberg
Tobias