Afficher le texte d'assistance en cliquant sur la zone de texte à l'aide de jquery

Question

Je souhaite afficher le texte d'assistance en cliquant sur les zones de texte. Par exemple: si je clique sur une zone de texte, cela devrait nous aider en indiquant quoi taper: Entrez le nom d'utilisateur ici

J'ai essayé d'utiliser le code ci-dessous, mais le texte "Entrez le nom d'utilisateur" s'estompe, je souhaite que le texte soit affiché jusqu'à ce que le focus soit modifié en un autre texte. boîte.

suggérez un 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 un démonstration de travail

Answer 2

Je ne sais pas pourquoi vous manipulez la propriété d'affichage CSS et utilisez fadeIn / fadeOut:

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