remove default text from asp textbox using onfocus and onblur

Question

I have tried to do this however it doesn't seem to work. Below is my code. When the textbox gains focus the color changes to yellow but the default text remains. If I clear the text and lose focus then the textbox displays "undefined" in gray text. Ultimately I would like the default text to be gray and the input text upon focus to be black. Also, I would like to change the background color of the textbox upon focus. Any advice would be appreciated.

HTML

<asp:TextBox ID="TextBox1" runat="server" value="Enter Last Name" onfocus="gotFocus(this)" onblur="lostFocus(this)" Width="175px" CssClass="textbox1"></asp:TextBox>

CSS

.textbox1 {
            color:gray;
        }

Javascript

function gotFocus(obj)
{
    if (obj.value == obj.defaultvalue)
        obj.value = "";

    obj.style.color = "black";
    obj.style.backgroundColor = "yellow";
}

function lostFocus(obj)
{
    if (obj.value == "")
    {
        obj.value = obj.defaultvalue;
        obj.style.color = "gray";
    }

    obj.style.backgroundColor = "transparent";
}

Answer 1

You may not need JS, you can easily accomplish your requirement via. CSS

#TextBox1{
    color:grey; //or any color you want
}
#TextBox1:focus{
    color:white;
    background-color:black;//any color you want
}

Here is the fiddle