Show helper text on clicking textbox using jquery

Question

I want to display helper text on clicking on the text boxes. eg: If I click a text box it should help us by saying what to type: Enter username here

I have tried below given code but the text "Enter username" is fading out, I want the text to be displayed until the focus is changed to another text box.

please, suggest some code for this 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);
    });
});

Russ Cam · Accepted Answer · 2009-07-30T11:57:51.457

4

Something like the following should do it

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

Here is a Working Demo

edited Jul 30 '09 at 11:57

answered Jul 30 '09 at 11:50

Russ Cam

124,184
33
204
266

You can edit the sample by adding /edit to the URL. You could improve it by ensuring that the helper text for a textbox fades in after the helper text for another textbox has finished fading out. This would be simple using CSS classes – Russ Cam Jul 30 '09 at 12:42
that should have come out /edit to the URL. I thought html markup was now operative in comments but looks like it isn't. – Russ Cam Jul 30 '09 at 12:43

score 1 · Answer 2 · answered Jul 30 '09 at 11:52

I'm not sure why you're manipulating the CSS display property as well as using fadeIn/fadeOut:

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

Show helper text on clicking textbox using jquery

2 Answers2