Afficher le texte d'aide en cliquant sur la zone de texte en utilisant jquery

Question

Je veux afficher le texte d'aide en cliquant sur les zones de texte. par exemple: Si je clique sur une zone de texte, il devrait nous aider en disant quoi taper: Entrez le nom d'utilisateur ici

J'ai essayé ci-dessous code, mais le texte « Entrez le nom d'utilisateur » se fane, je veux que le texte à afficher jusqu'à ce que le focus soit changé en une autre zone de texte.

veuillez suggérer du code pour ce type.

<input type = "text"/><span>Enter username</span> 
<input type = "text"/><span>Enter password</span>  


$(document).ready(function(){ 
    $("input").focus(function() { 
     $(this).next("span").css('display','inline').fadeOut(1000); 
    }); 
}); 

Answer 1

Quelque chose comme ce qui suit devrait le faire

$(function(){ 
    $("input") 
     .focus(function() { 
      $(this).next("span").fadeIn(1000); 
     }) 
     .blur(function() { 
      $(this).next("span").fadeOut(1000); 
     }); 
}); 

Voici une Working Demo

Answer 2

Je ne sais pas pourquoi vous manipuler la propriété d'affichage CSS, ainsi que l'utilisation fadeIn/fadeOut:

$(document).ready(function(){ 
    $("input").focus(function() { 
     $(this).next("span").fadeIn(1000); 
    }).blur(function() { 
     $(this).next("span").fadeOut(1000); 
    }); 
});