Avec jQuery mise en œuvre, vous pouvez FACILEMENT supprimer les valeurs par défaut lorsqu'il est temps de présenter. Ci-dessous est 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 êtes à la recherche d'un recouvrement, mais vous pourriez préférer la facilité de cette route (aujourd'hui, sachant ce que j'ai écrit ci-dessus). Si oui, alors j'ai écrit cela pour mes propres projets et il fonctionne vraiment sympa (nécessite jQuery) et ne prend que quelques minutes à mettre en œuvre pour l'ensemble de votre site. Il propose des gris de texte au premier abord, gris clair lorsque dans l'accent, et noir lors de la saisie. Il offre également le texte de l'espace réservé à chaque fois que le champ de saisie est vide.
D'abord configurer votre formulaire et inclure votre espace réservé attributs de la balise input.
<input placeholder="enter your email here">
Il suffit de copier ce code et de l'enregistrer comme 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 de cette façon que je vous recommande de mettre en œuvre sur tous les champs de saisie sur votre site quand le navigateur ne supporte pas HTML5 espace réservé attributs:
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();
});
});
}
