jQuery : Afficher/Cacher un champ mot de passe

[LawYor]

Dans la plus part des services, l’utilisateur est forcé à taper son mot de passe deux fois pour ne pas se tromper ! Pourquoi faire perdre son précieux temps à un utilisateur, quand on peut faire plus rapide ?

Eh bien, c’est ce que nous allons voir aujourd’hui, toujours avec notre merveilleuse librairie jQuery !

Commencez, comme toujours à importer la librairie

<script type="text/javascript" src="jquery.js"></script>

Maintenant, nous allons travailler sur cet exemple :

<form>
    <label>
        Mot de passe :
<input id="password" name="password" type="password" />
    </label>
 
    <label>
<input id="showcharacters" name="showcharacters" type="checkbox" /> Afficher les caractères
    </label>
</form>

JavaScript

Passons à la partie JavaScript

$(document).ready(function() {
    $('#showcharacters').click(function() {
        if ($(this).attr('checked')) {
            $('#password').replaceWith('
<input id="password" name="password" type="text" value="' + $('#password').attr('value') + '" />');
        }
        else {
            $('#password').replaceWith('
<input id="password" name="password" type="password" value="' + $('#password').attr('value') + '" />');
        }
    });
});

Et voilà le travail !

Explication du code

Ce que nous avons fait, c’est de lier l’événement « click » au checkbox, puis ensuite de vérifier, s’il est coché, ou pas. S’il est coché, on transforme le champ de type « password » en champ de type « text », et vis versa.

Démonstration

→ Voir une démonstration.

Source: Geeknoise

[SAKAROV]

J'avoue, mais bon, ctrl+a/ctrl+c/tab/ctrl+v ça met... une demi seconde^^ Mais certes, une demi seconde reste une demi seconde de trop