JavaScript Textbox Value löschen per Klick

raven16

Lieutenant
Registriert
Nov. 2008
Beiträge
580
Ich hab nicht viel Ahnung von JavaScript aber möchte trotzdem nicht auf eine Funktion verzichten.

Ich hab ein Formular, genau genommen ein Login, wo ich Benutzername und Passwort in 2 Verschiedene Textboxen eintragen kann.

HTML:
<input type="textbox" name="user" maxlength="30" value="Username oder Email" onfocus="this.value = ''">
<input type="password" name="password" maxlength="15" value="Passwort" onfocus="this.value = ''">

Mit JavaScript möchte ich folgendes erreichen:
1. Value von den Textboxen leeren bei klick->onfocus="this.value = ''"(simpel und super)
2. Value wieder zurücksetzen, wenn ohne eingabe der focus entfernt wird
3. Value nicht zurücksetzen, wenn eine eingabe gemacht wurde
4. In der Passwort-Textbox soll auch Passwort zu lesen sein und bei Eingabe des Passworts wie gewohnt Punkte

Beispiel dazu, um sich den Login anzuschauen, wie ich mir den von der Funktion vorstelle, sind die VZ-Communities wie schuelervz.net

Ich hoffe ihr könnt mir helfen
 
HTML:
<input type="textbox" name="user" maxlength="30" value="Username oder Email" onfocus="if(this.value=='Username oder Email') this.value=''" onblur="if(this.value=='') this.value='Username oder Email'">

Punkt 4 kannst du lösen indem du das Passwortfeld mit einem Hintergrundbild hinterlegst. Den Klartext darzustellen ist nicht möglich.
 
Du kannst für Punkt 4 auch versuchen den Type des Input-Tags zu verändern. Also zum Beispiel this.type = "password"; oder this.type = "text";

den Type textbox kenne ich garnicht, sondern nur "text".
 
Oh kann gut sein das das nur text heißt :D

aber der stellt ja wenn ich das eingebe ne korrekte textbox dar :)
 
1.
HTML:
<input onfocus="if( this.value == 'Benutzername' ) this.value = '';" />
<input onfocus="if( this.value == 'Passwort' ) this.value = '';" />
2.
HTML:
<input onblur="if( this.value == '' ) this.value = 'Benutzername';" />
<input onblur="if( this.value == '' ) this.value = 'Passwort';" />
4.
HTML:
<input type="text" onfocus="this.type = 'password';if( this.value == 'Passwort' ) this.value = '';" onblur="if( this.value == '' ) { this.type = 'text'; this.value = 'Passwort'; }" />
ungetestet, sollte aber funktionieren. hätte man nebenbei aber auch einfach über ein wenig google und selfhtml finden können. javascript is dabei nicht das problem, denn anscheinend hast du schon n backend für den login gebastelt.
 
danke ich werd das mal so testen...

das hauptproblem ist, das ich nicht wusste, wonach ich speziell suchen sollte

hab all mögliches zeug eingegeben


und ich wusste nicht, wie die attribute alle heißen

klappt soweit, danke!

aber ein letztes problem habe ich noch:
und zwar wenn ich ein benutzername eingebe und dann auf passwort wechsel und dann z.b. wieder auf benutzername klicke, dann löscht sich der vorher eingegebene benutzername wieder

--->Zeitsprung<--- :D

Hab das letzte Problem alleine noch hinbekommen:

Komplette Lösung zusammengefasst:

Benutzername oder Email:
HTML:
<input type="textbox" name="user" maxlength="30" value="Benutzername oder Email" onfocus="if(this.value == 'Benutzername oder Email') this.value = '';" onblur="if( this.value == '' ) this.value = 'Benutzername oder Email';" />

Passwort:
HTML:
<input type="textbox" name="password" maxlength="15" value="Passwort" onfocus="this.type = 'password';if( this.value == 'Passwort' ) this.value = '';" onblur="if( this.value == '' ) { this.type = 'text';this.value = 'Passwort'; }" />
Ergänzung ()

Mir ist aber doch noch was aufgefallen was mich stört aber weiß nicht wie man das ändert oder ob man das ändern kann.

und zwar blinkt bei der textbox Benutzername der Strich (Cursor?) wenn man die im focus setzt. so sieht man, dass man jetzt lostippen kann durch diesen blinkenden strich.

wenn ich auf die Passworteingabe klicke, dann erscheint dieser blinkende strich in der passwortbox nicht, sondern sie bleibt einfach leer. man kann zwar einfach lostippen aber ich hätte da gerne auch nen blinkenden strich drin :D
 
Zuletzt bearbeitet:
Zurück
Oben