Afficher/Masquer les caractéres d'un mot de passe

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, avec 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>

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 !

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.

Voir d'autres articles

Tweet

Unknown