Показать вспомогательный текст при нажатии на текстовое поле с помощью jquery

Question

Я хочу отображать вспомогательный текст при нажатии на текстовые поля. Например: если я щелкну текстовое поле, оно должно помочь нам, сказав, что печатать: введите здесь имя пользователя

Я попробовал ниже приведенный код, но текст " Введите имя пользователя " исчезает, я хочу, чтобы текст отображался до тех пор, пока фокус не будет изменен на другой текст коробка.

, пожалуйста, предложите код для этого типа.

<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

Что-то вроде следующего должно сделать это

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

Вот рабочая демонстрация

Answer 2

Я не уверен, почему вы манипулируете свойством отображения CSS, а также используете fadeIn / fadeOut:

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