TOC

jQuery - effet de filigrane sur la saisie de texte

jQuery - effet de filigrane sur la saisie de texte

Un exemple simple de jQuery pour vous montrer comment implémenter un effet de texte en filigrane sur un champ de saisie.

1. Extraits de code

Un champ de saisie e-mail et une classe de filigrane CSS.

jQuery pour appliquer l'effet de filigrane sur le champ e-mail. 

$(document).ready(function() {

    var watermark = 'Puts your email address';

    //init, set watermark text and class
    $('#email').val(watermark).addClass('watermark');

    //if blur and no value inside, set watermark text and class again.
    $('#email').blur(function(){
        if ($(this).val().length == 0){
            $(this).val(watermark).addClass('watermark');
        }
    });

    //if focus and text is watermrk, set it to empty and remove the watermark class
    $('#email').focus(function(){
        if ($(this).val() == watermark){
            $(this).val('').removeClass('watermark');
        }
    });
});

2. Demo

Code source HTML complet. 



jQuery and watermark example











jQuery - Watermark on input text

Résultat.

Télécharger le code source

Téléchargez-le -jQuery-watermark-input.zip (1kb)

Related