Texte explicatif pour champs de saisie avec jQuery

Publié le 3 mars 2014

Lors d’un projet j’ai eu besoin de créer un formulaire qui affichait des textes explicatifs dans les champs de saisie. Après quelques recherches j’ai trouvé un article contenant un code pour jQuery : Change input field placeholder text with jQuery. Par contre le code n’étais pas tout à fait à jour puisqu’il date de 2009.

J’ai donc mis à jour le code et le voici.

Version minimaliste, ne traite pas les champs de mot de passe (pastebin)

    $(document).ready( function() {
        $(".placeholder").each( function( ) {
        
            var elem = $(this);
            var text = elem.attr('rel');
    
            if ( elem.val() === '' )
                elem.val( text );
        
            elem.focus( function() {
                if ( elem.val() === text )
                    elem.val('');
            });
    
            elem.blur( function() {
                if ( elem.val() === '' )
                    elem.val( text );
            });
            
            var form = elem.parents('form:first');
    
            form.submit( function() {
                if (elem.val() === text)
                    elem.val("");
            });
            
        });
    });

Version qui traite les champs de mot de passe (pastebin)

    $(document).ready( function() {
        $(".placeholder").each( function( ) {

            var elem = $(this);
            var text = elem.attr('rel');

            if( elem.attr('type') === 'password' )
                elem.type = 'password';
            
            if ( elem.val() === '' ) {
                elem.val( text );
                
                if( elem.type === 'password' )
                    elem.attr('type', 'text' );
            }

            elem.focus( function() {
                if ( elem.val() === text ) {
                    elem.val('');
                    
                    if( elem.type === 'password' )
                        elem.attr('type', 'password');
                }
            });

            elem.blur( function() {
                if ( elem.val() === '' ) {
                    elem.val( text );
                    
                    if( elem.type === 'password' )
                        elem.attr('type', 'text');
                }
            });
            
            var form = elem.parents('form:first');

            form.submit( function() {
                if (elem.val() === text)
                    elem.val("");
            });
            
        });
    });