Naja, wenigstens funktioniert es jetzt tadellos
Problem beim erweitern des formulars mit JavaScript
-
-
Wie wäre es, der Funktion einen Parameter mit der id der zu leerenden Box zu übergeben, dann brauchst du nur eine Funktion, die beliebige Felder leert.
Das Typ Ändern könntest du dann als weiteren Parameter machen, der entweder true (Typ ändern) oder false (Typ nicht ändern) sein kann.Damit brauchst du dann nur eine Funktion.
-
Ja, da hat Sören Recht
Außerdem ist folgendes doof: Wenn ich zum Beispiel Username eingebe und dann "rausgehe" und dann wieder reingehe um etwas zu korrigieren dann ist alles weg. Das solltest du korrigieren!
-
Zitat von "Sören"
Wie wäre es, der Funktion einen Parameter mit der id der zu leerenden Box zu übergeben, dann brauchst du nur eine Funktion, die beliebige Felder leert.
Das Typ Ändern könntest du dann als weiteren Parameter machen, der entweder true (Typ ändern) oder false (Typ nicht ändern) sein kann.Damit brauchst du dann nur eine Funktion.
wie soll ich das achen? bzw. wie übergibt man zum beispiel die id?
bin javascript noob^^Mir würde jetzt nur einfallen:
richtiger gedankengang?
-
-
Zitat von "Yamram"
onclick="Clear(passwort);"
achso und dann inner funktion if abfragen machen, also wenn übergabe wert == ... und so weiter?
-
-
Dynamisch wäre das Ganze dann so:
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <title>Titel</title> <meta charset="UTF-8" /> <script> function change_type(obj, type, standard) { if(undefined !== standard) if('' == obj.value || standard == obj.value) obj.type = type; else return false; else obj.type = type; } function change_value(obj, content, standard) { if(true == standard) if('' == obj.value || content == obj.value) obj.value = content; if(undefined !== standard) if('' != obj.value && standard != obj.value) return false; obj.value = content; } </script> </head> <body> <form action="" method="post"> <fieldset> <legend>Bitte Einloggen</legend> <label><input type="text" name="benutzername" value="Benutzername" onclick="change_value(this, '', 'Benutzername');" onblur="change_value(this, 'Benutzername', true);" /></label> <label><input type="text" name="passwort" value="Passwort" onclick="change_value(this, '', 'Passwort'); change_type(this, 'password');" onblur="change_value(this, 'Passwort', true); change_type(this, 'text', 'Passwort');" /></label> <input type="submit" name="button" value="Einloggen!" /> </fieldset> </form> </body> </html>
change_type Verhalten: obj und type sind erforderliche Werte, obj wird wie immer mit this gesetzt, this beinhaltet das aktuelle Element (in unserem Fall jeweils ein input Element). type wird entweder mit text oder password gesetzt. je nachdem welcher Typ gebraucht wird, standard ist ein optionaler Wert, den wir bei onblur mit dem Standard Value des Input Elements füllen (also hier Passwort)
Nun überprüft change_type erst ein mal ob standard gesetzt ist, dann prüft es ob das Passwortfeld leer ist oder mit dem Standard gefültl ist, dann entscheidet es je nach dem ob das Feld zurpckgesetzt wird oder nicht.
change_value Werhalten: obj und content sind erforderliche Werte, obj verhält sich genau wie bei change_type, content wird mit dem gewünschten neuen Value für das Feld gefüllt. Im onfocus Attribut müssen wir standard mti dem Standard Value Wert des Input Elements füllen, damit die Funktion entscheiden kann ob das Value vom Input Feld eine Usereingabe ist, oder eine Systemvorgabe welche nicht ersetzt werden muss.
Das ganze ginge auch schlampig, jedoch deutlich kürzer (je nach dem wie viele Input Felder es werden..):
Code<form action="" method="post"> <fieldset> <legend>Bitte Einloggen</legend> <label><input type="text" name="benutzername" value="Benutzername" onclick="if(this.value == '') this.value = 'Benutzername';" onblur="if(this.value == '') this.value = 'Benutzername';" /></label> <label><input type="text" name="passwort" value="Passwort" onclick="if(this.value == '' || this.value == 'Passwort') { this.value = ''; this.type = 'password'; };" onblur="if(this.value == '' || this.value == 'Passwort') { this.value = 'Passwort'; this.type = 'text'; };" /></label> <input type="submit" name="button" value="Einloggen!" /> </fieldset> </form>
Beides ungetestet, beides sollte klappen
-
Habe jetzt mal alle mängel versucht zu beheben:
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <title>Titel</title> <meta charset="UTF-8" /> <link href="style/main.css" type="text/css" rel="stylesheet" /> <link href="style/login.css" type="text/css" rel="stylesheet" /> <script> document.createElement("header"); document.createElement("nav"); document.createElement("section"); // für alte browser function fenster_leeren(uebergabewert) { if( document.getElementById("benutzername").id == uebergabewert ) { if( document.getElementById("benutzername").value == "Benutzername..." ) { //der value wird geleehrt bei onclick="fenster_leeren(id_des_inputs);" document.getElementById("benutzername").value = ""; } } if( document.getElementById("passwort").id == uebergabewert ) { if( document.getElementById("passwort").value == "Passwort..." ) { //der value wird geleehrt bei onclick="fenster_leeren(id_des_inputs);" document.getElementById("passwort").value = ""; document.getElementById("passwort").type = "password"; } } } function fenster_zuruecksetzten() { if(document.getElementById("benutzername").value == '') // wenn nix ausgefüllt wurde und das fenster erlassen wird (wegen onblur="") { //der value wird wieder gefüllt document.getElementById("benutzername").value = "Benutzername..."; } if(document.getElementById("passwort").value == '') { document.getElementById("passwort").type = "text"; // bei onblur also verlassen, wird es ein text feld damit //der value sichtbar wird der gleich noch gegeben wird document.getElementById("passwort").value = "Passwort..."; } } </script> </head> <body onload="document.getElementById('passwort').type = 'text';"> <header>huhu</header> <form action="" method="post"> <fieldset> <legend>Bitte Einloggen</legend> <label><input type="text" id="benutzername" name="benutzername" value="Benutzername..." onclick="fenster_leeren('benutzername');" onblur="fenster_zuruecksetzten();" /></label> <label><input type="password" id="passwort" name="passwort" value="Passwort..." onclick="fenster_leeren('passwort');" onblur="fenster_zuruecksetzten();" /></label> <!-- id wegen javascript --> <input type="submit" name="button" value="Einloggen!" /> </fieldset> </form> huhu </body> </html>
*EDIT*
Basiii: ich bleibe aber ersteinmal bei meinem code, da er funktioniert und ich ihn erstehe. wenn ich javascript besser verstehe werde ich sicherlich auf deinen umsteigen -
Was gibt es da nicht zu verstehen? Ich habe unten drunter sogar alles erklärt
Eine JavaScript Funktion ist wie eine PHP Funktion, du kannst auch da Parameter übergeben.
-
Was hälst du von meinem "code"
Total falsch oder "ok"?
-
Was funktioniert ist immer ok, aber wirklich elegant ist es nicht, verglichen mit dem was man mit JavaScript anstellen kann ist es total billig, aber na ja, wie du bereits sagtest: du verstehst es, es funktioniert, also, warum fragst du dann erst? :wink:
-
Stimmt da hast du recht.
PS: Was nützt es mir wenn ich nächste woche in deinen code schaue, der auf meinem pc ist und ihn nicht verstehe? da lerne ich erstmal javascript komplettSo hat noch jemand was passendes für den thread zu bieten?
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!