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

Answer 1

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

Answer 2

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

Answer 3

Hi,

How we write the same javascript code for TextBox.

Like how we call the textbox's focus() method in the line of code below

$("input").focus.....

Thanks, Dazy