Mostra il testo di supporto facendo clic sulla casella di testo usando jquery

Question

Voglio visualizzare il testo di supporto facendo clic sulle caselle di testo. ad esempio: se faccio clic su una casella di testo, dovrebbe esserci di aiuto dicendo cosa digitare: inserisci qui il nome utente

Ho provato sotto il codice indicato ma il testo " Inserisci nome utente " sta scomparendo, voglio che il testo venga visualizzato fino a quando lo stato attivo non viene modificato in un altro testo di dialogo.

, suggerisci un codice per questo tipo.

<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

Qualcosa di simile al seguente dovrebbe farlo

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

Ecco una Demo di lavoro

Answer 2

Non sono sicuro del motivo per cui stai manipolando la proprietà di visualizzazione CSS e usando fadeIn / fadeOut:

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