web-dev-qa-db-fra.com

jQuery valeur d'entrée focus et flou

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.

javascriptjqueryfocusblurplaceholder
10
Karl

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 .

20
doublesharp

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); 
            }
         });
1
Nelson

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.

0
Wancieho