  |
| Autor |
Nachricht |
CrazyLexx
User [User]
Anmeldung: 29.07.07
Beiträge: 13
|
 Verfasst am: 10.08.2007, 16:27 Titel: Formularfeld mit Vorgabe (ähnlich Suchfeld im Browser) |
 |
|
Hallo zusammen,
habe auf meiner Webseite zum Login zwei entsprechende Formularfelder eingebunden und möchte nun die Beschriftung ("Benutzername" "Passwort") in das eigentlich Formularfeld setzen. Also ganz ähnlich wie die Suchfelder im IE7 oder FF: Im Hintergrund steht in einem leichten grau der Feldname und wenn man in das Feld klickt, verschwindet der Eintrag.
Wie kann ich das umsetzen?
Danke,
TOM
|
|
| Nach oben |
|
 |
BcF
Erfahrener [User]
Anmeldung: 06.07.07
Beiträge: 50
Wohnort: Münster
|
| Verfasst am: 10.08.2007, 17:43 Titel: |
|
|
| Code: | | <input type="text" size="30" name="text" value="Name" style="color:#ccc;" onfocus="this.value='';this.style.color='#000;';" onblur="this.value= this.value=='' ? 'Name' : this.value;this.style.color='#ccc;';" /> |
ungetestet aber ich glaub so gings 
EDIT:
Der eingegebene Text soll natürlich auch stehen bleiben, Code editiert 
_________________
mfg, BcF
| Zitat: | | There are 10 different types of people in the world: Those who understand binary and those who don't. |
|
|
| Nach oben |
|
|
CrazyLexx
User [User]
Anmeldung: 29.07.07
Beiträge: 13
|
| Verfasst am: 10.08.2007, 20:40 Titel: |
|
|
Ah prima, danke für die Antwort. Dazu aber trotzdem noch eine Frage:
Verwende den nachfolgenden Code, damit die Forumfelder transparent sind und den Hintergrund nicht ganz verdecken. Wenn man nun in eines der Felder klickt, verschwindet der vorgegebene Eintrag und die Schrift wird dunkler.
| Code: |
<input name="kname" type="text" size="15" id="kname" value="Benutzername" style="filter:alpha(opacity=50); -moz-opacity: 0.50; color:#808080;" onfocus="if (this.value == 'Benutzername') this.value = ''; this.style.color='#000;'" />
|
Besteht nun die Möglichkeit, dass ich die Tranparenz aufheben kann, wenn man in das Feld klickt? Also das nicht nur die Schrift dunkler wird, sonder das Formularfeld ganz hell erscheint?
Wofür ist überhaupt die Bedingung "onblur" in deinem Beispiel?
|
|
| Nach oben |
|
|
BcF
Erfahrener [User]
Anmeldung: 06.07.07
Beiträge: 50
Wohnort: Münster
|
| Verfasst am: 10.08.2007, 21:21 Titel: |
|
|
so:
| Code: | <input
type="text"
size="30"
value="Benutzername"
style="
color:#AAA;
filter:alpha(opacity=50);
-moz-opacity:0.5;
background:#666;
border:solid 1px #C00;
"
onfocus="
this.value = this.value == 'Benutzername' ? '' : this.value;
this.style['color'] = '#000;';
this.style['filter'] = 'alpha(opacity=100);';
this.style['-moz-opacity'] = '1.0;';
"
onblur="
this.value = this.value == '' ? 'Benutzername' : this.value;
this.style['color'] = (this.value == '') || (this.value == 'Benutzername') ? '#AAA;' : '#000;';
this.style['filter'] = (this.value == '') || (this.value == 'Benutzername') ? 'alpha(opacity=50);' : 'alpha(opacity=100);';
this.style['-moz-opacity'] = (this.value == '') || (this.value == 'Benutzername') ? '0.5;' : '1.0;';
"
/> |
siehts dann so aus wie hier*, die Farben sind nur zum verdeutlichen, ich denke man kann sehen was man ändern muss, is ja toll formatiert
*  http://bcf.pytalhost.com/docs/input.html
_________________
mfg, BcF
| Zitat: | | There are 10 different types of people in the world: Those who understand binary and those who don't. |
|
|
| Nach oben |
|
|
CrazyLexx
User [User]
Anmeldung: 29.07.07
Beiträge: 13
|
| Verfasst am: 10.08.2007, 21:35 Titel: |
|
|
Habe mal den "onFocus" Teil übernommen, aber das Eingabefeld bleibt trotzdem transparent, wenn ich in das Feld klicke... Oder benötige ich auch den "onBlur" Teil?!
|
|
| Nach oben |
|
|
BcF
Erfahrener [User]
Anmeldung: 06.07.07
Beiträge: 50
Wohnort: Münster
|
| Verfasst am: 10.08.2007, 22:04 Titel: |
|
|
nee, onblur brauchst du nicht unbedingt
das mit der Transparenz hab ich auch grad festgestellt, geht das denn im IE (ich hab irgendwie festgestellt, dass JS probleme mit style-Anweisungen mit Bindestrichen hat).
Wobei dazu zu sagen wäre, dass das ja ohnehin nur in IE und FF funktioniert, die anderen (Opera, Konqueror, Safari etc.) unterstützen ja garkeine Transparenz.
_________________
mfg, BcF
| Zitat: | | There are 10 different types of people in the world: Those who understand binary and those who don't. |
|
|
| Nach oben |
|
|
CrazyLexx
User [User]
Anmeldung: 29.07.07
Beiträge: 13
|
| Verfasst am: 10.08.2007, 22:11 Titel: |
|
|
Es geht weder im IE noch im FF. Wobei beim FF zumindest die Änderung der Schriftfarbe zu #000 funktioniert.
|
|
| Nach oben |
|
|
|
|
