J'ai le code suivant de sorte que lorsqu'un utilisateur sélectionne une zone de saisie, la valeur disparaisse, mais la valeur par défaut est ensuite réinsérée une fois qu'un utilisateur a cliqué dessus.
$(function() {
var defaultText = '';
$('input[id=input]').focus(function() {
defaultText = $(this).val();
$(this).val('');
});
$('input[id=input]').blur(function() {
$(this).val(defaultText);
});
});
Cependant, ce n'est pas exactement ce que je veux. Si un utilisateur insère du texte, je ne souhaite pas que le texte par défaut remplace ce que l'utilisateur a mis. Je suis également assez nouveau sur jQuery, toute aide serait donc grandement appréciée.
Dans votre méthode focus()
, vous devriez vérifier si elle est égale à defaultText
avant de l'effacer, et dans votre fonction blur()
, il vous suffit de vérifier si val()
est vide avant de définir defaultText
. Si vous envisagez d'utiliser plusieurs entrées, il est préférable d'utiliser une classe plutôt qu'un ID. Votre sélecteur serait donc input.input
lorsque la classe est "entrée". Même s'il s'agissait d'un identifiant, vous le référeriez en tant que input#input
.
// run when DOM is ready()
$(document).ready(function() {
$('input.input').on('focus', function() {
// On first focus, check to see if we have the default text saved
// If not, save current value to data()
if (!$(this).data('defaultText')) $(this).data('defaultText', $(this).val());
// check to see if the input currently equals the default before clearing it
if ($(this).val()==$(this).data('defaultText')) $(this).val('');
});
$('input.input').on('blur', function() {
// on blur, if there is no value, set the defaultText
if ($(this).val()=='') $(this).val($(this).data('defaultText'));
});
});
Mettez-le en action dans this jsFiddle .
Dans votre gestionnaire de flou, vérifiez si l'utilisateur n'a rien écrit. Dans ce cas, rétablissez le texte par défaut, comme ceci:
$('input[id=input]').blur(function() {
if ($(this).val() == '') {
$(this).val(defaultText);
}
});
Une vieille question + Je n'aime pas trop quand les gens proposent une autre solution au lieu de résoudre mon problème mais néanmoins: L'utilisation d'un attribut d'espace réservé HTML avec un plugin jQuery résoudrait le problème.
Vous pouvez également utiliser les attributs de données HTML et écrire/lire à partir de cela.