<input type="text"> naar <input type="password"> veranderen

[bartosiej]

Hallo allemaal,

Op mijn website: www.gratizwebtoolz.nl zie je dat je links in het menu kunt inloggen. Er staan 2 tekstvelden met de bovenste value=" Gebruikersnaam" en de onderste value="**********".

Wat ik eigenlijk zou willen is dat er in het wachtwoord veld value="Wachtwoord" staat, maar dat kan alleen als ik in die input, type op text zet, maar dan is het hele wachtwoord effect weg, want als er dan iemand achter je staat dan kan diegene het wachtwoord gewoon lezen!

Daarom zou ik eigenlijk willen dat er in het begin dit staat:
<input type="text" value="Wachtwoord">

En als je er dan met je muis ingaat om iets in te tikken, moet dat veranderen naar:
<input type="password" value="">

Ik dacht eigenlijk tot de dag van vandaag dat dit onmogelijk was, maar bij de T-mobile site doen ze het wel op die manier!!:
www.t-mobile.nl

Omdat dit een javascriptje is, zou je dit heel makkelijk kunnen krijgen door naar de broncode van t-mobile.nl te kijken, maar omdat deze site nogal ingewikkeld gescript is, lukt het mij niet om de code ervandaan te halen.

Weet iemand hoe dit precies moet?

alvast bedankt,

bartosiej

[AtleX]

JavaScript:

<input type="text" value="wachtwoord" onfocus="this.type='password'; this.value=(this.value=='wachtwoord') ? '' : this.value">

Niet getest trouwens. Wel getest (in FF), en maakt nu ook het veld leeg als de value nog hetzelfde is als de default value (wat wel weer problemen oplevert als het wachtwoord ook "wachtwoord" is).

[ Voor 137% gewijzigd door AtleX op 02-07-2006 12:57 ]

[bartosiej]

nope, werkt hier niet (met IE)...

EDIT:
Met FF werkt het idd wel..

[ Voor 36% gewijzigd door bartosiej op 02-07-2006 12:59 ]

[Xander]

De T-mobile site doet het trouwens heel anders, die gebruikt een bg-plaatje ervoor...


Dat plaatje dus...

JavaScript:

<input name="_ctl0:_ctl0:_ctl3:relatedLinkRepeater:_ctl0:_ctl0:_ctl0:textPassword" type="password" id="_ctl0__ctl0__ctl3_relatedLinkRepeater__ctl0__ctl0__ctl0_textPassword" class="wc130HomePageLoginBoxnormal" onblur="if(this.value=='') this.style.background='#ffffff url(/global/media/images/newstyle/bg_input_password.gif) no-repeat';" onfocus="this.style.background='#ffffff';" style="background: #ffffff url(/global/media/images/newstyle/bg_input_password.gif) no-repeat;" />

[ Voor 18% gewijzigd door Xander op 02-07-2006 13:00 ]

[MachoM]

Het werkt niet in IE, omdat IE je niet toestaat het type attribute dynamisch aan te passen.

Kijk naar dit scriptje:

JavaScript:

function f() {
document.getElementById('ww').setAttribute('value', ''); 
document.getElementById('ww').setAttribute('type','password');
}

dan crashed IE op de laatste regel van f, met de mededeling:

"Deze opdracht wordt niet ondersteund"

Je zult dus een work-around moeten bedenken, bijvoorbeeld met het plaatje.

[Osiris]

Misschien wel te simpel, maar misschien 2 input-velden die 'op elkaar' staan waarvan een van beide wel en de andere niet zichtbaar is en dan simpelweg de display-CSS-attribuut aanpassen met javascript?

[ Voor 11% gewijzigd door Osiris op 02-07-2006 13:26 ]

[orf]

type is readonly. Dat Firefox het toestaat aan te passen is best vreemd.
Een background image vind ik de makkelijkste oplossing. Hoewel iedereen wel begrijpt dat je je wachtwoord in een vakje moet typen waar sterretjes staan.

[MachoM]

Das natuurlijk onzin, (X)HTML is gespecificeerd met een DTD. Readonly in een DTD bestaat niet.
(alhoewel je uitleg wel lijkt te kloppen met de foutmelding, maarja das IE.)

[ Voor 32% gewijzigd door MachoM op 02-07-2006 14:09 ]

[orf]

type of type DOMString, readonly
The type of control created. See the type attribute definition in HTML 4.0.

http://www.w3.org/TR/2000...-one-html.html#ID-6043025

[MachoM]

Das allemaal leuk, maar we leven tegenwoordig wel in een wereld van DOM2, niet van DOM1. In de dom 2 specificaties is hier niets van terug te vinden.

http://www.w3.org/TR/2003...0109/html.html#ID-6043025

(De pagina is HTML 4.01 -> DOM 2)

EDIT:

Maarja aangezien IE hier faalt, zullen we er mee moeten leven.

[ Voor 13% gewijzigd door MachoM op 02-07-2006 15:42 ]

[orf]

I stand corrected.

[MachoM]

We're only human

[Blaise]

Wat ook kan is het hele input-password element uit de DOM te verwijderen en te vervangen door een input-text.

[bartosiej]

Het is eindelijk gelukt (met een bg-image) en ik vind het er uiteindelijk best netjes uitzien:
http://www.gratizwebtoolz.nl

allemaal bedankt voor jullie hulp!

[bas.kb]

Even een opmerking gevolgd met een vraag.

Ik heb hezelfde scriptje gebruikt...en loop tegen een klein probleem aan die ik ook op gratiswebtoolz tegenkom.

Als je namelijk je gebruikersnaam en wachtwoord opslaat, en de volgende keer op de website komt, en een deel van je gebruikersnaam invult.. dan krijg je een keuzelijstje met alle onthouden waarden die je eerder op die website hebt ingevoerd. Op het moment dat je je gebruikersnaam voluit typt en op Tab drukt werkt het 'onfocus()' element prima, maar als je op de gebruikersnaam klikt die windows automatisch aanvult komt je password (die sterrtjes, bolletjes) over het 'wachtwoord plaatje' heen te staan.

Het onFocus element werkt dus niet als je gebruikt maakt van deze automatisch aanvullen functie.

Iemand enig idee hoe je dit kan oplossen?

// edit, het onChange element werkt ook niet als IE gebruikt maakt van de automatisch aanvullen/password onthouden functie.

[ Voor 7% gewijzigd door bas.kb op 19-10-2006 11:48 ]