✔ Bei Klick "Nickname" und/oder "PAsswort" aus Inputfeld entfernen

C

Comenius

Guten Abend :)

Ich bin mir jetzt nicht ganz sicher, ob dieses Thema nicht ins Javascript-Forum gehört.
Da ich das Ganze aber lieber mit CSS verwirklichen möchte, schreibe ich es nun hier.

Und zwar:

Es gibt ja öfters mal so ein Login-Formular, wo in beiden Feldern "Nickname" und "Passwort" drinn steht.
Klick man nun in dieses Inputfeld, verschwindet der Text.

Soetwas möchte ich bei mir nun auch machen, weiss aber natürlich nicht wie...

Am liebsten wäre es mir in CSS.
Aber wie schon gesagt, glaube ich, dass es mehr Javascript ist.

Danke :)

Gruss
Commi
 
Soetwas ist mit CSS nicht mölglich. Da musst du schon auf ein JavaScript-Skript zurückgreifen.


Einfaches Beispiel:
Code: 
window.onload = function() {
	var obj = document.getElementById("text:benutzername");
	    obj.setAttribute("value", "Benutzername");
	    obj.onfocus = new Function("if(this.value==this.defaultValue) this.value=''");
	    obj.onblur = new Function("if(this.value=='') this.value='Benutzername'");
	var obj = document.getElementById("password:passwort");
	    obj.type = "text";
	    obj.setAttribute("value", "Passwort");
	    obj.onfocus = new Function("if(this.value==this.defaultValue) { this.value=''; this.type='password' }");
	    obj.onblur = new Function("if(this.value=='') { this.value='Passwort'; this.type='text' }");
}
HTML: 
<input type="text" id="text:benutzername" name="benutzername" title="Bitte geben Sie hier Ihren Benutzername ein">
<input type="password" id="password:passwort" name="passwort" title="Bitte geben Sie hier Ihr Passwort ein">
 
Zuletzt bearbeitet:
Schade, habe ich mir schon irgendwie gedacht.

Der Code funktioniert auf jedenfall, wofür ich dir auch sehr dankbar bin. :)

Danke

Gruss
Commi

//EDIT

*Grübel-Grübel*...

Einfaches Beispiel:
Zum Vergrößern anklicken....

Daraus entnehme ich wohl die Sache mit dem "password"

Kann man den Inhalt des "password"-Feldes vielleicht vor diesem Klick in Buchstaben umwandeln lassen?

Wäre super, denn 8 Sternchen sehen nicht so sonderlich toll aus :)

Danke

Gruss
Commi
 
Dank dir erstmal :)

"Passwort" wird in deinem Code-Beispiel erst angezeigt, wenn man in das Feld und anschließend wieder ins Freie klickt.

Ich habe mal mit dem Inhalt von dem Passwort-Teil rumgespielt und rumprobiert, aber es ändert sich nichts.

Muss da vielleicht noch was ganz anderes dazu, damit "Passwort" von Anfang an da steht :confused:

Danke

Gruss
Commi
 
So funktioniert's bei mir einwandfrei:

HTML: 
<form>
<input type="text" name="benutzername" value="Benutzername" onFocus="if(this.value=='Benutzername') this.value=''" onBlur="if(this.value=='')this.value='Benutzername'" title="Bitte geben Sie hier Ihren Benutzername ein">
<input type="password" name="passwort" value="Passwort" onFocus="if(this.value=='Passwort') this.value=''" onBlur="if(this.value=='')this.value='Passwort'" title="Bitte geben Sie hier Ihr Passwort ein">
</form>
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23
 
Code: 
<input type="text" name="" size="40" value="test" onFocus="if(this.value=='test') this.value=''" onBlur="if(this.value=='')this.value='test'" class="form">
versuch das
 
Oki Doki, funktioniert super, danke euch :)

Da dies eigentlich gar nicht in dieses Forum gehört, belasse ich es jetzt mal dabei.

Dank euch nochmal, habt mir sehr geholfen.

Gruss
Commi
 
Comenius hat gesagt.:
Oki Doki, funktioniert super, danke euch :)

Da dies eigentlich gar nicht in dieses Forum gehört, belasse ich es jetzt mal dabei.

Dank euch nochmal, habt mir sehr geholfen.

Gruss
Commi
Zum Vergrößern anklicken....
Keine Ursache, ist doch gern geschehen ;-]
 
Hab mir gerade nen kleinen CSS-Hack überlegt... Ist zwar nicht genau das was du suchst, aber was sehr ähnliches...
HTML: 
<html>

<head>
<style>
label.input
{
display:block;
border:1px solid black;
background:skyblue;
position:relative;
cursor:text;
padding:0;
overflow:hidden;
width:100px;
color:skyblue;
font-size:12px;
}
label.input span
{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
font-family:sans-serif;
color:black;
}
label.input input
{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
visibility:hidden;
border:0px;
font-size:12px;
font-family:sans-serif;
z-index:1;
background:skyblue;
color:black;
}
label.input input:focus
{
visibility:visible;
}
</style>
</head>

<body>
Hallo!
<label for="name" class="input"><span>Name</span><input type="" id="name" value="">a</label>
</body>
</html>
Funktioniert einwandfrei in Firefox und Opera.
Bin ganz stolz auf mich*lol*
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück