Inhoud van een password-veld zichtbaar maken
Hier onder zie je een invoerveld voor een password. Als je er iets in invult, zie je alleen stippen. De tekst is niet leesbaar. Het is niet mogelijk om de tekst te kopiëren om via het klembord zichtbaar te maken wat je hebt ingetypt.
Bij veel browsers kun je spieken door op het oogje 
te klikken. Andere browsers hebben deze mogelijkheid niet.
De functie kan vaak via de instellingen worden veranderd.
Een en ander is een goede reden om zelf wat te ontwikkelen.
Naast het invoerveld staat een icon, een oogje. Als je daar met de muis op gaat staan zie je de inhoud van het password-veld.
Als je de muis weghaalt wordt de tekst weer verborgen.
Op deze bladzijde wordt uitgelegd hoe je dit aanpakt. De code van het voorbeeld, inclusief het plaatje, kun je downloaden om zelf te gebruiken.
Je kunt dit in een formulier opnemen als service aan de bezoekers van je website.
- Er worden twee items besproken:
- De werking van het script
- Inbouwen in je eigen site
- Het password-veld staat binnen een <form<>-tag. Om te communiceren met JavaScript heeft het id="wachtwoordveld".
- Voor het id kun je elke naam gebruken die je wilt.
- Het figuurtje (het oogje) staat er naast. Voor de positionering is CSS gebruikt.
- De <img>-tag heeft de attributen onmouseover en onmouseout. Die activeren allebei de JavaScript-function toggleType().
- De function toggleType() heeft een (verplicht aanwezige) parameter: my_id.
- Bij de aanroep van de function geef je de id van het password-veld mee. In dit geval is dat dus "wachtwoordveld".
- toggleType() bekijkt het type van het invoerveld met id="wachtwoordveld". Het type "password" wordt veranderd in "text", of andersom.
- Opmerking: Op deze pagina krijgt het wachtwoord-veld automatisch de focus bij het laden van de pagina. In
de praktijk is dat meestal niet nodig en zul je het achterwege laten.
- Inbouwen in je eigen site
- Zet de JavaScript function toggleType() in de <HEAD>.
- Zet het password-veld met het bijbehorende 'oogje' in een formulier, in de <BODY>, op de plaats waar je het nodig hebt.
- Zorg dat de verwijzingen naar het id gelijkluidend zijn.
- De code om het password-veld de focus te geven zet je helemaal onderin de code, net voor de </BODY>-tag
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<script>
function toggleType(my_id) {
var aa = document.getElementById(my_id);
aa.type = (aa.type == 'text') ? 'password' : 'text';
}
</script>
(Zet dit in de <BODY>, op de plaats waar het nodig is).
<form style="border:1px solid red; width:70%; text-align:center;
margin:20px auto; padding:10px">
Wachtwoord: <input id="wachtwoordveld" type="password" size="30"
style="height:16px; border:2px solid blue">
<img src="oog-veld.png"
style="position:relative; top:5px; left:-2px"
onmouseover="toggleType('wachtwoordveld')"
onmouseout="toggleType('wachtwoordveld')">
</form>
(om het invoerveld de focus te geven na het laden van de pagina:)
<script>
document.getElementById('wachtwoordveld').focus()
</script>
Downloaden:
Druk op de knop:
File: voorb428.zip, 609 bytes.
