使用jquery在单击文本框上显示帮助文本

时间:2009-07-30 11:44:29

标签: jquery textbox focus setfocus

我想在单击文本框时显示帮助文本。 例如:如果我单击一个文本框,它应该通过说明输入内容来帮助我们:在这里输入用户名

我在下面给出了代码,但文字 “输入用户名” 正在淡出,我想要显示文字,直到焦点更改为另一个文本框

请为此类推荐一些代码。

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

2 个答案:

答案 0 :(得分:4)

以下内容应该这样做

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

这是 Working Demo

答案 1 :(得分:1)

我不确定你为什么要操纵CSS显示属性以及使用fadeIn / fadeOut:

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