Typ von input Feld verändern

[jenno]

Ich habe ein Formularfeld , in dem soll ein Passwort eingegeben werden. Wenn ein User noch nicht angemeldet ist, sieht er die Möglichkeit zum Login...zwei Eingabefelder, die mit "Username" und "Passwort" vorbelegt sind.

Wenn jetzt aber ein Passwort eingegeben wird, soll das natürlich nicht mehr zu lesen sein, sondern anstatt dessen die **** erscheinen.

Meine Frage ist jetzt, kann ich per Javascript das Eingabefeld vom Typ Text in den Typ Passwort umwandeln

 

[Lord-Lance]

Und

<input type="password" ..... >

reicht nicht? Das wäre das was du haben möchtest oder?

 

[Xaicon]

z.B. so:

<script type="text/javascript">
<!--
if(angemeldet == 1) {
document.write("<input type='text'>");
}else{
document.write("<input type='password'>");
}
//-->
</script>

jetzt möchte ich aber wissen, wie Du per Javascript abfragst ob der User angemeldet ist.

 

[jenno]

Also. type="password" reicht eben nicht, weil wenn ich dann das Textfeld mit "Passwort" vorbelege, dann steht da ja nicht "Passwort" sondern "********".

Und dann habe ich auch gar nicht vor, per Javascript abzufragen ob ein User schon angemeldet ist. Ich möchte einfach nur, wenn noch niemand angemeldet ist, dann sieht man die Eingabefelder zum Login. Wenn schon ein User angemeldet ist, dann sieht man eben ne Logout Möglichkeit. Das ist aber alles nicht das Problem, das funktioniert nämlich auch schon.

Worum es geht, ich möchte gern, dass VOR der Eingabe des Users die Eingabefelder vorbelegt sind. Damit er eben sieht, dass er in das eine Feld seinen Usernamen und in das andere Feld ein Passwort eingeben soll.

Bei onfocus, also wenn dann der User tatsächlich was eingeben will, müsste also der Typ von den Eingabefeld in den Typ password umgewandelt werden. (Da ja, um das Eingabefeld mit dem Wort "Passwort" vorzubelegen, das Feld vom Typ text ist) Ich fürchte dass das nicht geht...

Und warum das Ganze? Ich möchte "Username" und "Passwort" in die Eingabefelder und nicht davor aus Platzgründen schreiben.

Sorry, wenn ich mich noch nicht deutlich genug ausgedrückt hatte.

 

[Fabian H]

Der Mozilla macht so alles richtig:

<input type="text" onfocus="if (this.value == 'Passwort') { this.value = ''; this.type = 'password'; }"
       value="Passwort" style="width:120px;" id="ChngType" />

(Wobei sich hier natürlich streiten lässt, ob es richtig ist, oder nicht)

Im IE musst du auf die etwas umständlicher Methode zurückgreifen:

<script type="text/javascript">

function changeInput(a_sParentId)
{
    window.document.getElementById(a_sParentId).innerHTML = '<input type="password" style="width:120px;" name="Password" />';
    window.setTimeout('window.document.forms[\'LoginForm\'].elements[\'Password\'].focus();', 1);
    //window.document.forms['LoginForm'].elements['Password'].focus();
}

</script>

<form name="LoginForm">
  <span id="PwInput">
    <input type="text" onfocus="if (this.value == 'Passwort') { this.value = ''; changeInput('PwInput'); }"
           value="Passwort" style="width:120px;" name="Password" />
  </span>
</form>

Ohne dem setTimeout wird der Focus leider nicht gesetzt (auskommentierte
Zeile ist drunter).

 

[tomate]

DANKE!

genau das habe ich auch gesucht. Ich hatte zwar bereits eine Lösung, aber Deine ist eleganter. Wusste gar nicht, dass man in Event-Handler auch Abfragen einbauen kann. Super Sache!

Viele Grüsse
tomate