Video Kurs HTML-Tutorial
jetzt HTML Video-Kurs bestellen
vom Macher des HTML-Seminars

Tutorial HTML, CSS u. PHP - Forum

Fragen und Antworten bei allen Problemen rund um Deine Homepage
gemeinsames Forum von www.html-seminar.de und www.PHP-Kurs.com

unser NEUES Forum gibt es unter

http://html-seminar.de/html-css-php-forum/

(Daten und Benutzer wurden übernommen, Kennwörter nicht, daher "Kennwort vergessen" beim ersten Nutzen verwenden!)

Zum Inhalt

Problem beim erweitern des formulars mit JavaScript

…ist eine Skriptsprache, die die Möglichkeiten von HTML stark erweitert. Sie wird eingesetzt, um Internet-Seiten flexibel und interessant gestalten zu können. Beispiel: Formulare mit Berechnungsfunktionen / animierte Schaltflächen oder einfach fallender Schnee. - Fragen - Antworten –Tipps hier hinein...

Moderator: lauras

Beiträge bitte im neuen Forum

Problem beim erweitern des formulars mit JavaScript

Beitragvon drPHIP132 » Samstag 21. Januar 2012, 11:48

Hallo,

standartmäßig ist <input type="password" id="passwort" name="passwort" value="Passwort..." /> ja password bei mir.
Nun wollte ich, wenn javascript aktiviert ist, dass es sofort zu text wird und in dem feld steht "Hier bitte passwort eintragen" oder so ähnlich.

Wollte das mit folgendem Code bewirken, welcher allerdings keine wirkung zeigte :/
es bleibt in allen browsern bei "password"

Code: Alles auswählen
[...]
<body>

    <script>

    document.getElementById("passwort").type = "text";
    // wird zu text umgewandelt wenn javascript aktiviert, damit value sichtbar

    </script>
    <form action="" method="post">
        <fieldset>
            <legend>Bitte Einloggen</legend>
            <label><input type="text" name="benutzername" value="Benutzernamen..." /></label>
            <label><input type="password" id="passwort" name="passwort" value="Passwort..." /></label>
                                          <!-- id wegen javascript -->
                <input type="submit" name="button" value="Einloggen!" />
        </fieldset>
    </form>

</body>
</html>


Wenn das Feld angeklickt wird, soll es wieder passwort werden und der value verschwinden, dass wurde ja aber schon im vorherigen thread geklärt :)
Benutzeravatar
drPHIP132
HTML-Acrobat
 
Beiträge: 744
Registriert: Samstag 15. Januar 2011, 19:10
Wohnort: Sachsen, Erzgebirge
Nach oben

Re: Problem beim erweitern des formulars mit JavaScript

Beitragvon Basiii » Samstag 21. Januar 2012, 11:55

Das wäre ein Weg:

Code: Alles auswählen
[...]
<body onload="document.getElementById('passwort').type = 'text';">
    <form action="" method="post">
        <fieldset>
            <legend>Bitte Einloggen</legend>
            <label><input type="text" name="benutzername" value="Benutzernamen..." /></label>
            <label><input type="password" id="passwort" name="passwort" value="Passwort..." /></label>
                                          <!-- id wegen javascript -->
                <input type="submit" name="button" value="Einloggen!" />
        </fieldset>
    </form>

</body>
</html>
Benutzeravatar
Basiii
HTML-Acrobat
 
Beiträge: 1139
Registriert: Dienstag 12. Januar 2010, 13:57
Nach oben

Re: Problem beim erweitern des formulars mit JavaScript

Beitragvon drPHIP132 » Samstag 21. Januar 2012, 11:57

Danke dir :)
Benutzeravatar
drPHIP132
HTML-Acrobat
 
Beiträge: 744
Registriert: Samstag 15. Januar 2011, 19:10
Wohnort: Sachsen, Erzgebirge
Nach oben

Re: Problem beim erweitern des formulars mit JavaScript

Beitragvon Basiii » Samstag 21. Januar 2012, 11:58

Natürlich gibt es noch viele andere Wege z.B. ein Formular anzusprechen oder den Event Handler zu vermeiden, aber das war hier nicht gefragt.
Benutzeravatar
Basiii
HTML-Acrobat
 
Beiträge: 1139
Registriert: Dienstag 12. Januar 2010, 13:57
Nach oben

Re: Problem beim erweitern des formulars mit JavaScript

Beitragvon drPHIP132 » Samstag 21. Januar 2012, 13:44

Um keinen neuen Thread aufzumachen geht es hier weiter.
Ist jetzt quasi die zusammenführung meiner beiden letzen threads.

warum geht mein code nicht?
seit ich die onblur funktionen eingesetzt habe, geht nix mehr :(
(es ist so, wie wenn mein gesammter js code weg wäre^^)

Code: Alles auswählen
<!DOCTYPE html>
<html>
<head>
    <title>Titel</title>
    <meta charset="UTF-8" />
    <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 passwordfield_to_textfield()
    {
        document.getElementById("passwort").type = "text";
        // wird zu text umgewandelt wenn javascript aktiviert, damit value sichtbar
    }



    function clear_benutzername()
    {
        //der value wird geleehrt
        document.getElementById("benutzername").value = "";
    }
            function umkehrfunktion_clear_benutzername();
            {
                if(document.getElementById("benutzername").value == '')
                // wenn nix ausgefüllt wurde
                {
                    //der value wird wieder gefüllt
                    document.getElementById("benutzername").value = "Benutzername...";
                }
            }


    function clear_password()
    {
        document.getElementById("passwort").type = "password";
        // bei oneclick wird es ein passwort feld und
        //der value wird geleehrt
        document.getElementById("passwort").value = "";
    }
            function umkehrfunktion_clear_password();
            {
                if(document.getElementById("password").value == '')
                // wenn nix ausgefüllt wurde
                {
                    document.getElementById("passwort").type = "text";
                    // bei onblur also verlassen, wird es ein passwort feld und
                    //der value wird wieder gefüllt
                    document.getElementById("passwort").value = "Passwort...";
                }
            }

    </script>

</head>
<body onload="passwordfield_to_textfield();">


    <form action="" method="post">
        <fieldset>
            <legend>Bitte Einloggen</legend>
            <label><input type="text" id="benutzername" name="benutzername" value="Benutzername..." onclick="clear_benutzername();" onblur="umkehrfunktion_clear_benutzername();"  /></label>
            <label><input type="password" id="passwort" name="passwort" value="Passwort..."         onclick="clear_password();"     onblur="umkehrfunktion_clear_passwort();"      /></label>
                                          <!-- id wegen javascript -->
                <input type="submit" name="button" value="Einloggen!" />
        </fieldset>
    </form>

</body>
</html>
Benutzeravatar
drPHIP132
HTML-Acrobat
 
Beiträge: 744
Registriert: Samstag 15. Januar 2011, 19:10
Wohnort: Sachsen, Erzgebirge
Nach oben

Re: Problem beim erweitern des formulars mit JavaScript

Beitragvon drPHIP132 » Samstag 21. Januar 2012, 15:32

*EDIT*

habe das problem gelöst :)
Benutzeravatar
drPHIP132
HTML-Acrobat
 
Beiträge: 744
Registriert: Samstag 15. Januar 2011, 19:10
Wohnort: Sachsen, Erzgebirge
Nach oben

Re: Problem beim erweitern des formulars mit JavaScript

Beitragvon Basiii » Samstag 21. Januar 2012, 16:23

Doe Lösung deines Problems wäre noch ganz schön um nachträgliche Threadleser nicht vor unvollständige Tatsachen zu stellen :wink:
Benutzeravatar
Basiii
HTML-Acrobat
 
Beiträge: 1139
Registriert: Dienstag 12. Januar 2010, 13:57
Nach oben

Re: Problem beim erweitern des formulars mit JavaScript

Beitragvon drPHIP132 » Samstag 21. Januar 2012, 16:44

hatte -warum auch immer- hinter den umkehrfunktionen ; gesetzt

Lösung:
Code: Alles auswählen
<!DOCTYPE html>
<html>
<head>
    <title>Titel</title>
    <meta charset="UTF-8" />
    <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 passwordfield_to_textfield()
    {
        document.getElementById("passwort").type = "text";
        // wird zu text umgewandelt wenn javascript aktiviert, damit value sichtbar
    }



    function clear_benutzername()
    {
        //der value wird geleehrt
        document.getElementById("benutzername").value = "";
    }
            function umkehrfunktion_clear_benutzername()
            {
                if(document.getElementById("benutzername").value == '')
                // wenn nix ausgefüllt wurde
                {
                    //der value wird wieder gefüllt
                    document.getElementById("benutzername").value = "Benutzername...";
                }
            }


    function clear_password()
    {
        document.getElementById("passwort").type = "password";
        // bei oneclick wird es ein passwort feld und
        //der value wird geleehrt
        document.getElementById("passwort").value = "";
    }
            function umkehrfunktion_clear_password()
            {
                if(document.getElementById("passwort").value == '')
                // wenn nix ausgefüllt wurde
                {
                    document.getElementById("passwort").type = "text";
                    // bei onblur also verlassen, wird es ein passwort feld und
                    //der value wird wieder gefüllt
                    document.getElementById("passwort").value = "Passwort...";
                }
            }

    </script>

</head>
<body onload="passwordfield_to_textfield();">


    <form action="" method="post">
        <fieldset>
            <legend>Bitte Einloggen</legend>
            <label><input type="text" id="benutzername" name="benutzername" value="Benutzername..." onclick="clear_benutzername();" onblur="umkehrfunktion_clear_benutzername();"  /></label>
            <label><input type="password" id="passwort" name="passwort" value="Passwort..."         onclick="clear_password();"     onblur="umkehrfunktion_clear_password();"      /></label>
                                          <!-- id wegen javascript -->
                <input type="submit" name="button" value="Einloggen!" />
        </fieldset>
    </form>
    huhu
</body>
</html>


PS: im IE 8 (oder 9?) ist eine deutliche veränderung des passwort feldes zusehen, welche das layout verschiebt
Benutzeravatar
drPHIP132
HTML-Acrobat
 
Beiträge: 744
Registriert: Samstag 15. Januar 2011, 19:10
Wohnort: Sachsen, Erzgebirge
Nach oben

Re: Problem beim erweitern des formulars mit JavaScript

Beitragvon Yamram » Samstag 21. Januar 2012, 17:05

An dieser Stelle würde ich sagen, dass das ein bisschen aufwendig ist. Man kann doch nicht für jedes Feld eine Funktion schreiben! Leider kommt mir gerade aber auch keine Idee, wie ich das anders regeln kann. Auf jeden Fall sollte man so etwas mal entwickeln ;)
Benutzeravatar
Yamram
HTML-Sonderfall
 
Beiträge: 616
Registriert: Samstag 5. Februar 2011, 20:05
Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink
Nach oben

Re: Problem beim erweitern des formulars mit JavaScript

Beitragvon drPHIP132 » Samstag 21. Januar 2012, 17:09

Yamram hat geschrieben:Auf jeden Fall sollte man so etwas mal entwickeln ;)


Mach du es doch, anstatt die Aufgabe an andere zu verteilen xD :D
Benutzeravatar
drPHIP132
HTML-Acrobat
 
Beiträge: 744
Registriert: Samstag 15. Januar 2011, 19:10
Wohnort: Sachsen, Erzgebirge
Nach oben

Re: Problem beim erweitern des formulars mit JavaScript

Beitragvon Yamram » Samstag 21. Januar 2012, 17:14

Hehe :) Ich habe mir schon gedacht, dass du das sagst. Ich werde es zumindest versuchen ;) Und dann werde ich es später vielleicht hier posten :))))
Benutzeravatar
Yamram
HTML-Sonderfall
 
Beiträge: 616
Registriert: Samstag 5. Februar 2011, 20:05
Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink
Nach oben

Re: Problem beim erweitern des formulars mit JavaScript

Beitragvon drPHIP132 » Samstag 21. Januar 2012, 17:22

Ich versuche es auch, schön knapp und bündig halten :)
Benutzeravatar
drPHIP132
HTML-Acrobat
 
Beiträge: 744
Registriert: Samstag 15. Januar 2011, 19:10
Wohnort: Sachsen, Erzgebirge
Nach oben

Re: Problem beim erweitern des formulars mit JavaScript

Beitragvon Yamram » Samstag 21. Januar 2012, 17:34

Also, ich hatte große Probleme und mit der Zeit habe ich es mir immer leichter gemacht :/ Irgendwie ist das Ganze nicht so toll :////

Code: Alles auswählen
<!DOCTYPE html>
<html>
   <head>
      <title>
         Test
      </title>
      <style type="text/css">
         input {
            display: block;
         }
      </style>
      <script type="text/javascript">
         function Clear(id, value) {
            var now = document.getElementById(id).value;
            if(now == value) {
               document.getElementById(id).value = "";
            }
         }
         function Put(id, value) {
            var now = document.getElementById(id).value;
            if(now == "") {
               document.getElementById(id).value = value;
            }
         }
      </script>
   </head>
   <body>
      <form method="get" action="">
         <input id="username" type="text" name="username" value="Username" onfocus="Clear('username', 'Username');" onblur="Put('username', 'Username');" />
         <input id="vorname" type="text" name="vorname" value="Vorname" onfocus="Clear('vorname', 'Vorname');" onblur="Put('vorname', 'Vorname');" />
         <input id="nachname" type="text" name="nachname" value="Nachname" onfocus="Clear('nachname', 'Nachname');" onblur="Put('nachname', 'Nachname');"  />
         <input id="password" type="password" name="password" value="" />
         <input type="submit" />
      </form>
      <noscript>
         Bitte aktivieren Sie Javascript.
      </noscript>
   </body>
</html>
Benutzeravatar
Yamram
HTML-Sonderfall
 
Beiträge: 616
Registriert: Samstag 5. Februar 2011, 20:05
Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink
Nach oben

Re: Problem beim erweitern des formulars mit JavaScript

Beitragvon drPHIP132 » Samstag 21. Januar 2012, 17:40

meine lösung kommt in 20min oder so, nicht wundern.
musste grade noch mit dem hund raus ( :( )
Benutzeravatar
drPHIP132
HTML-Acrobat
 
Beiträge: 744
Registriert: Samstag 15. Januar 2011, 19:10
Wohnort: Sachsen, Erzgebirge
Nach oben

Re: Problem beim erweitern des formulars mit JavaScript

Beitragvon Yamram » Samstag 21. Januar 2012, 17:50

@drPHIP132: Alles klar :) Was hälst du denn von meiner Lösung? Junge, Bewegung tut dir auch mal gut :bbb
Benutzeravatar
Yamram
HTML-Sonderfall
 
Beiträge: 616
Registriert: Samstag 5. Februar 2011, 20:05
Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink
Nach oben
Nächste
Beiträge bitte im neuen Forum

Zurück zu JavaScript

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Optimized by SEO phpBB
Deutsche Übersetzung durch phpBB.de
cron