Avec une implémentation jQuery, vous pouvez FACILEMENT supprimer les valeurs par défaut lorsqu'il est temps de soumettre. Voici un exemple:
$('#submit').click(function(){
var text = this.attr('placeholder');
var inputvalue = this.val(); // you need to collect this anyways
if (text === inputvalue) inputvalue = "";
// $.ajax(... // do your ajax thing here
});
Je sais que vous recherchez une superposition, mais vous préférerez peut-être la facilité de cet itinéraire (sachant maintenant ce que j'ai écrit ci-dessus). Si c'est le cas, j'ai écrit ceci pour mes propres projets et cela fonctionne vraiment bien (nécessite jQuery) et ne prend que quelques minutes à mettre en œuvre pour l'ensemble de votre site. Il offre du texte gris au début, gris clair lors de la mise au point et noir lors de la saisie. Il propose également le texte d'espace réservé chaque fois que le champ de saisie est vide.
Configurez d'abord votre formulaire et incluez vos attributs d'espace réservé sur les balises d'entrée.
<input placeholder="enter your email here">
Copiez simplement ce code et enregistrez-le sous placeholder.js.
(function( $ ){
$.fn.placeHolder = function() {
var input = this;
var text = input.attr('placeholder'); // make sure you have your placeholder attributes completed for each input field
if (text) input.val(text).css({ color:'grey' });
input.focus(function(){
if (input.val() === text) input.css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
input.val("").css({ color:'black' });
});
});
input.blur(function(){
if (input.val() == "" || input.val() === text) input.val(text).css({ color:'grey' });
});
input.keyup(function(){
if (input.val() == "") input.val(text).css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
input.val("").css({ color:'black' });
});
});
input.mouseup(function(){
if (input.val() === text) input.selectRange(0,0);
});
};
$.fn.selectRange = function(start, end) {
return this.each(function() {
if (this.setSelectionRange) { this.setSelectionRange(start, end);
} else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
});
};
})( jQuery );
À utiliser sur une seule entrée
$('#myinput').placeHolder(); // just one
C'est ainsi que je vous recommande de l'implémenter sur tous les champs de saisie de votre site lorsque le navigateur ne prend pas en charge les attributs d'espace réservé HTML5:
var placeholder = 'placeholder' in document.createElement('input');
if (!placeholder) {
$.getScript("../js/placeholder.js", function() {
$(":input").each(function(){ // this will work for all input fields
$(this).placeHolder();
});
});
}