How set the Backgound Text using javascript or JQuery in the input text field or text box?

I hardly know any Jquery or Javascript. So, I beg your pardon in advance if I ask any question very stupidly.

I want to set backgound text for two text fields. My two text fields are

<asp:TextBox ID="txtFName" backgroundText="First Name" runat="server" Width="80px"  Style="float: left;"></asp:TextBox>
<asp:TextBox runat="server" ID="txtLName"  backgrountText="Last Name"
                                    Width="110px" Style="float: left"></asp:TextBox>

One of friend wrote the jquery for the first text box and it is working perfectly. this code is

$(document).ready(function(){

        var inpName = $('#txtFName');
        var backgroundText = inpName.attr('backgroundText');

        inpName.val(backgroundText);

        inpName.focus(function(){
            if(inpName.val() == backgroundText) inpName.val('');
        }).blur(function(){
            if(inpName.val() == '') inpName.val(backgroundText);
        });


    }); 

But if I use this code for the last-name text box, then it does not work what I did, I copied 开发者_StackOverflow社区the entire Jquery code and just replace the var inpName = $('#txtFName'); as var inpName = $('#txtLName'); But, If I do so, My first working text box (txtFirst) does work properly. but, If I write like this way: $(document).ready(function(){ checkRequiredInputs();

        var inpName = $('#txtFName');
        var backgroundText = inpName.attr('backgroundText');

        inpName.val(backgroundText);

        inpName.focus(function(){
            if(inpName.val() == backgroundText) inpName.val('');
        }).blur(function(){
            if(inpName.val() == '') inpName.val(backgroundText);
        });

        var inpName = $('#txtLName');
        var backgroundText = inpName.attr('backgroundText');

        inpName.val(backgroundText);

        inpName.focus(function(){
            if(inpName.val() == backgroundText) inpName.val('');
        }).blur(function(){
            if(inpName.val() == '') inpName.val(backgroundText);
        });

I does not work anymore, Why? Can Anyone Explain me Why is this happening? and how can I solve this problem?

Shameless self promotion:

I created a plugin to do just this but it uses the HTML5 placeholder attribute.

http://designindevelopment.com/plugins/replaceholder-jquery-plugin/

See if it does what you are looking for, if not I can help tweak what you have.

Have a look at some jQuery Watermark plugins.

This one here is not bad http://code.google.com/p/jquery-watermark/

Try adjusting your javascript as follows:

    var inpName = $('#<%=txtFName.ClientID %>');
    var backgroundText = inpName.attr('backgroundText');

    inpName.val(backgroundText);

    inpName.focus(function(){
        if(inpName.val() == backgroundText) inpName.val('');
    }).blur(function(){
        if(inpName.val() == '') inpName.val(backgroundText);
    });

    var inpName = $('#<%=txtLName.ClientID %>');
    var backgroundText = inpName.attr('backgroundText');

    inpName.val(backgroundText);

    inpName.focus(function(){
        if(inpName.val() == backgroundText) inpName.val('');
    }).blur(function(){
        if(inpName.val() == '') inpName.val(backgroundText);
    });

This puts the id that will be rendered to the client into your javascript, as it usually does not match the server side ID attribute.

This is my own question and later I have solve it using ajaxWaterMarkExtender. Here I am pasting the code (modified) that is working for me perfectly. This is the code in aspx page

<asp:TextBox ID="txtFName" backgroundText="First Name" runat="server" CssClass="textBoxForUI"
                            Width="80px" Style="float: left;"></asp:TextBox>
                        <cc1:TextBoxWatermarkExtender ID="txtFName_TextBoxWatermarkExtender" runat="server"
                            Enabled="True" TargetControlID="txtFName" WatermarkCssClass="waterMark" WatermarkText="First Name">
                        </cc1:TextBoxWatermarkExtender>
                        <asp:TextBox runat="server" ID="txtLName" CssClass="textBoxForUI" backgrountText="Last Name"
                            Width="110px" Style="float: left"></asp:TextBox>
                        <cc1:TextBoxWatermarkExtender ID="txtLName_TextBoxWatermarkExtender" runat="server"
                            Enabled="True" TargetControlID="txtLName" WatermarkCssClass="waterMark" WatermarkText="Last Name">
                        </cc1:TextBoxWatermarkExtender>