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

Question

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 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?

Answer 1

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.

Answer 2

Have a look at some jQuery Watermark plugins.

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

Answer 3

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.

Answer 4

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>