使用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);
    });
});