2011-03-06 3 views
1

J'ai ce code:Comment ne pas soumettre un texte en filigrane?

$(document).ready(function() { 
    $('.watermark').focus(function() { 
     if (this.className == 'watermark') 
     { 
      this.className = ''; 
      this.reset = this.value; 
      this.value = ''; 
     } 
    }); 

    $('.watermark').blur(function() { 
     if (this.value == '') 
     { 
      this.className = 'watermark'; 
      this.value = this.reset; 
     } 
    }); 
}); 

Et il fonctionne très bien, mais quand je soumets ma forme les filigranes sont soumis sous forme de données. Sans modifier mon fichier de traitement php, est-il possible que le texte en filigrane soit soumis en blanc? Ce que je veux dire est: si la classe de la zone de texte est 'watermark', soumettez une valeur vide pour cette zone de texte. Je ne veux pas modifier mon fichier de traitement PHP, mais cela ne me dérange pas d'utiliser JQuery. La meilleure solution serait-elle de capturer l'événement de clic du bouton de soumission et de définir rapidement des zones de texte avec des valeurs de filigrane vides?

+0

La meilleure solution est de ne pas faire vos filigranes en définissant la * valeur * en premier lieu. Utilisez 'placeholder' ou placez une étiquette sous l'entrée (transparente). – Quentin

+0

L'espace réservé est-il entièrement pris en charge? Je ne pouvais pas le faire fonctionner. Comment pourrait-on mettre une étiquette sous l'entrée? Edit: Apparemment, le texte de l'espace réservé ne fonctionne qu'avec Firefox 3.7+ et j'utilise 3.6 Je vais mettre à niveau mais je ne devrais probablement pas l'utiliser si c'est ce nouveau. –

+0

Pour placer une étiquette sous une entrée, utilisez le positionnement absolu. Exemple non poli: http://dorward.me.uk/tmp/label-work/example.html – Quentin

Répondre

0

cela devrait fonctionner si je vous ai bien compris:

$('form').submit(function(){ 
    $(this).find('.watermark').each(function(){ 
     if(!this.reset) 
      this.value = ''; 
    }); 
}); 
0

Utilisez l'attribut placeholder sur vos éléments d'entrée de texte:

<input type="text" placeholder="Text goes here" id="foo" /> 

Depuis cela ne fonctionne pas dans certains navigateurs plus anciens, ajouter un HTML5 placeholder Attribuer un script de secours à votre page (comme this ou this).

Questions connexes