Paradoxon? Wie ist ein Textfeld gleichzeitig ein Passwordfeld?

LoiK · 06.04.2006, 18:28

Hallo zusammen,

wir haben ein Anmeldeformular bestehend aus
- USERNAME und - PASSWORT

Aus Platzgründen habe ich die Information um welche
Box es sich handelt in das Textfeld selber reingeschrieben.

Wie schafft man es aber nun, daß wenn man auf das
Textfeld raufklickt sich aus dem Textfeld ein Passwordfeld
mit Sternchen wird? (aus type="text" == type="password").

PHP-Code:


			
<input name="passwort" type="text" class="form" id="passwort" onfocus="if(this.value == 'Passwort') this.value='';" onblur="if (this.value=='') this.value='Passwort';" value="Passwort" />

Danke für jede Hilfe!
Beste Grüße
vom LoiK

06.04.2006, 19:07

ich würd da andersrum rangehen, sprich per js aus dem passwort ein text machen. hier mal zusammengestümpert:

Code:

<body onload="document.getElementById('password').type='text';">
  <input name="pass" id="password" type="password" value="holla die waldfee" onfocus="if(this.type=='text')this.type='password';if(this.value=='holla die waldfee')this.value='';" />
</body>

von wegen der privatsphäre und so.
geht aber garantiert noch tausendmal eleganter

Malleus · 06.04.2006, 20:45

Meinst Du so etwas?
Malleus' Javascript FAQ: Text2Password

tschau

Frank

steffenk · 07.04.2006, 11:56

wie raffiniert

LoiK · 07.04.2006, 12:53

Hallo Malleus!

Perfekt! Das ist es!

Vielen Dank + Beste Grüße
vom LoiK!

LoiK · 07.04.2006, 13:56

Dankeschön!

Stuck Mojo · 07.04.2006, 14:56

solche kleinen snippets liebe ich ja und habs mal etwas allgemeiner geschrieben:

Code:

<html>
    <head>
        <title>jaja...</title>
        <script language="JavaScript" type="text/javascript">
        function convert2Password(Obj, value) {
            var nObj = Obj.cloneNode(true);
            nObj.type = 'password';
            nObj.onclick = null;
            nObj.value = typeof value == 'undefined' ? '' : value;
            Obj.parentNode.replaceChild(nObj, Obj);
            window.setTimeout(function() { 
                nObj.focus();
            }, 10);
        }
        </script>
    </head>
    <body>
        <div id="myDiv"><input type="text" size="35" onclick="convert2Password(this)" value="Bitte hier das Passwort eingeben!"></div>
    </body>
</html>

nur im IE und FF getestet - und das auf die schnelle

Gruss
Jan

PS: der Timeout sorgt dafür, dass der Focus überhaupt gesetzt werden kann: der Browser benötigt einen kleinen Moment um die Sache zu rendern. Bei ein direkter Funktionsaufruf wäre der Rendervorgang noch nicht abgeschlossen und es würde einen Fehler geben.

07.04.2006, 18:43

moinsen

<pingelig>
funktionieren tut das ja alles, aber haltet ihr es nicht auch für sinnvoller von einem echten passwortfeld auszugehen?

sollte javascript im benutzerbrowser nicht aktiviert sein, tippen die user ihr passwort in ein normales textfeld, was schlimmstenfalls (insofern autovervollständigen an) wieder rekonstruierbar ist.
</pingelig>

ich bin ja sonst nicht so, von wegen "jawennjavascriptausististalleslulu", aber bei passworteingaben fänd ich die sinnvolle auszeichnung schon wichtig.
deswegen mein suboptimaler beitrag mit dem onload. könnte man das sorum nicht auch in "schick" lösen?

321 · 07.04.2006, 19:23

und da man sowieso nicht lesen kann, was man eintippt, kann auch so Platz gespart werden:

HTML-Code:

Passwort <input type="password" style="width: 20px">

steffenk · 07.04.2006, 20:31

zu ingo - Du hast in einem Punkt Recht: Wenn kein Javascript zur Verfügung steht, sollte man dafür sorgen, das man alles korrekt bedienen / ausfüllen kann. Wenn es an ist, kann man das ganze durch Javascript besonders aufwerten.

zu 321: naja, wie sieht das denn aus, wenn plötzlich die Eingabe auf 20px schrumpft ...

zu StuckMojo - feine Sache, direkt universell benutzbar, Kompliment !

321 · 07.04.2006, 21:04

@St@effen: Nicht plötzllich! von Anfangan so ausgeben und so lassen!

Bei vielen Inputfeldern kann man mehr eingeben als man sieht.
20 ist vllt. etwas gar kurz, aber mit 40 bis 50 siehts nicht schlecht aus
und ist immer noch kürzer als: Bitte hier Passwort eingeben!

Malleus · 08.04.2006, 11:04

Zitat:

Zitat von ingo

ich würd da andersrum rangehen, sprich per js aus dem passwort ein text machen. hier mal zusammengestümpert:

Code:

<body onload="document.getElementById('password').type='text';">
  <input name="pass" id="password" type="password" value="holla die waldfee" onfocus="if(this.type=='text')this.type='password';if(this.value=='holla die waldfee')this.value='';" />
</body>

von wegen der privatsphäre und so.
geht aber garantiert noch tausendmal eleganter

Hallo Ingo,
hast Du Dein Script mal mit MSIE und Opera 8.5 probiert. Bei mir funktioniert's leider nicht. Ich glaub' das war auch der Grund, warum ich das "Replace"-Konstrukt gebaut habe.
...werd' mal schauen, ob man das ganze etwas "sicherer" machen kann!

tschau

Frank

Malleus · 08.04.2006, 11:12

Zitat:

Zitat von Stuck Mojo

solche kleinen snippets liebe ich ja und habs mal etwas allgemeiner geschrieben:

Code:

<html>
    <head>
        <title>jaja...</title>
        <script language="JavaScript" type="text/javascript">
        function convert2Password(Obj, value) {
            var nObj = Obj.cloneNode(true);
            nObj.type = 'password';
            nObj.onclick = null;
            nObj.value = typeof value == 'undefined' ? '' : value;
            Obj.parentNode.replaceChild(nObj, Obj);
            window.setTimeout(function() { 
                nObj.focus();
            }, 10);
        }
        </script>
    </head>
    <body>
        <div id="myDiv"><input type="text" size="35" onclick="convert2Password(this)" value="Bitte hier das Passwort eingeben!"></div>
    </body>
</html>

nur im IE und FF getestet - und das auf die schnelle

Gruss
Jan

PS: der Timeout sorgt dafür, dass der Focus überhaupt gesetzt werden kann: der Browser benötigt einen kleinen Moment um die Sache zu rendern. Bei ein direkter Funktionsaufruf wäre der Rendervorgang noch nicht abgeschlossen und es würde einen Fehler geben.

Hallo Jan,
schön, daß Du auch wieder da bist!
Ich hab' mir auch schon überlegt, das ganze zu verallgemeinern, hab' mich aber dann für meine "innerHTML-getElementById" - Methode entschieden, da diese einfacher zu verstehen ist. Das mit "replaceChild" ist natürlich schöner. Bei meiner Version "mußt" Du ja ein HTML-Element haben, daß exakt ein Kind, nämlich das Input-Control, hat. Das ist bei Dir nicht so.
Ich muß auch gestehen, daß ich von der offiziellen W3C-Methode nichts halte und fast "immer" auf "innerHTML" zugreife, da es für "meine" Zwecke schneller (quirksmode.org) ausgeführt wird und nicht so komplex ist.

Eine kleine Frage bzgl. Deines Scripts:
Warum brauchst Du den zweiten "value" Parameter und die entsprechende Zuweisung. Die ist doch eigentlich unnötig oder willst Du das Password mit übergeben?

Tschau

Frank

Stuck Mojo · 08.04.2006, 22:01

Zitat:

schön, daß Du auch wieder da bist!

...ja, ist leider recht selten geworden in der letzten Zeit... aber Arbeit geht nunmal vor. Und dort qualmen mir derzeitg die Finger

Zitat:

Ich muß auch gestehen, daß ich von der offiziellen W3C-Methode nichts halte und fast "immer" auf "innerHTML" zugreife, da es für "meine" Zwecke schneller (quirksmode.org) ausgeführt wird und nicht so komplex ist.

...klar, bei grossen Datenmengen geht nix über String-Verknüpfung per Array und innerHTML... bei kleinen Dingen sind die DOM-Dinger allerdings ausreichend und evtl. auch von Vorteil

Zitat:

Eine kleine Frage bzgl. Deines Scripts:
Warum brauchst Du den zweiten "value" Parameter und die entsprechende Zuweisung. Die ist doch eigentlich unnötig oder willst Du das Password mit übergeben?

...den value müsste man ehh leeren, daher hab ichs optional gemacht. Hat ansich keinen wirklichen Sinn.

Gruss
Jan

Malleus · 11.04.2006, 21:27

Hi Ingo,
wie versprochen, hier ist die "schönere" Version. Wenn Javascript deaktiviert ist, ist das INPUT Control ein Password-Control

Test

Code:

<html>
<head>
<title>Malleus' Javascript FAQ: Text-INPUT in PASSWORD-INPUT verwandeln</title>
<script language="JavaScript" type="text/javascript">

function initPage()
{
document.getElementById("myDiv").innerHTML = "<input onclick='convert2Password(this)' type='text' id='myPassword' size='35' value='Bitte hier das Passwort eingeben!'>";
};

function convert2Password( obj )
{
obj = obj.parentNode;
obj.innerHTML = "<input type='password' id='myPassword' size='35'>";
window.setTimeout( "document.getElementById('myPassword').focus()" , 10 );
}

</script>
</head>
<body  onload="initPage()">
<form name="myForm">
<div id="myDiv"><input type="password" name="myPassword" size="35"></div>
</form>
</body>
</html>

tschau

Frank