Transmettre var entre deux fonctions Javascript/Jquery?

Question

J'utilise Jquery pour supprimer une valeur par défaut dans une entrée HTML active.

Cependant, si rien n'est entré dans l'entrée, je veux que la valeur par défaut réapparaisse.

Pour essayer de faire cela, je l'ai créé:

$("#contact input").each(function(index) { 

     $(this).focus(function() { 
      var valvalue = $(this).val(); 
      $(this).val(''); 
     }); 

     $(this).focusout(function() { 
      var newvalvalue = $(this).val(); 
      if(newvalvalue == ''){ 
       $(this).val('', valvalue); 
      } 
     }); 

    }); 

La fonction focus() fonctionne très bien, mais la valvalue variable ne sont pas repris par la fonction focusout.

Quelqu'un connaîtrait-il un moyen de transmettre la variable valvalue à cette deuxième fonction focusout?

Answer 1

Vous devez rendre varvalue visible par les deux gestionnaires d'événements. Cela peut être fait en le déclarant hors de leur portée.

$("#contact input").each(function(index) { 

    var valvalue; /* both event handlers can see it here */ 

    $(this).focus(function() { 
     valvalue = $(this).val(); 
     $(this).val(''); 
    }); 

    $(this).focusout(function() { 
     var newvalvalue = $(this).val(); 
     if(newvalvalue == ''){ 
      $(this).val('', valvalue); 
     } 
    });  

}); 

Answer 2

Vous rencontrez un problème avec la portée de fermeture dans JS. Essayez de définir varvalue en dehors de votre fonction afin que les deux fonctions référencent la même variable.

$("#contact input").each(function(index) { 
     var valvalue; 
     $(this).focus(function() { 
      valvalue = $(this).val(); 
      $(this).val(''); 
     }); 

     $(this).focusout(function() { 
      var newvalvalue = $(this).val(); 
      if(newvalvalue == ''){ 
       $(this).val('', valvalue); 
      } 
     }); 

    }); 

Answer 3

En plus d'autres réponses, vous pouvez utiliser la propriété placeholder disponible en HTML5, si vous ne voulez pas soutenir les anciens navigateurs.

<input type="text" name="name" placeholder="Enter here">