How can I change the Forecolor of the Textbox on the OnClick ?

Question

I have 2 textboxes which has default values in forecolor:#999999. If I click on the textbox, the default value should clear and the forecolor should change to black. I mean, like watermarking. But I am not using any Ajax. need help...please...

Answer 1

You should use the onfocus and onblur events, rather than relying on click events. This way, it will work for keyboard users tabbing through the document.

var myInput = document.getElementById("myInput");
myInput.onfocus = function () {
    if (this.value == "Default Input Value") {
        this.value = "";
        this.style.color = "#000";
    }
}
myInput.onblur = function () {
    if (this.value == "") {
        this.value = "Default Input Value";
        this.style.color = "#999";
    }
}

See it in action here.

Answer 2

'Thanks for the reply...but it didn't worked for me..And also, I have 2 textboxes. Do I need to write something in the codebehind? This is my code..'

<script type="text/javascript" language="javascript">

        var txtbox=document.getElementById("txt_date");
        txtbox.onfocus=function(){
            if(this.value=="Date")
            {
                this.value="";
                this.style.color="#000";
            }
        }
        txtbox.onblur=function(){
            if(this.value=="")
            {
                this.value="Date";
                this.style.color="#999";
            }
        }
    </script>

and these are my textboxes...

<asp:TextBox ID="txt_date" runat="server" Width="60px">Date</asp:TextBox>
<asp:TextBox ID="txt_year" runat="server" Width="70px">Year</asp:TextBox>