Watermark Textbox using javascript

I need some help in my code.

I want the code dynamic like using a class in javascript, but I have not been too strong using javascript. I need your solution.

E.g the textbox display a text 'Enter key word or phrase', if someone enter the textbox. text 'Enter key word or phrase' disappear. and if not enter or mouse over the textbox the te开发者_开发问答xt 'Enter key word or phrase' appear again in color gray. I have the code below:

<asp:TextBox ID="txtQuery" runat="server" style="color: Gray;" 
ValidationGroup="req" value='Enter key word or phrase' 
onblur="if (this.value == '') { this.value = 'Enter key word or phrase'; 
this.style.color = 'Gray'; }" 
maxlength="255" onfocus="if(this.value == this.defaultValue){this.value='';  
this.style.color='Black'}"></asp:TextBox>

Please help.

As such your code should work but you also need to handle few scenarios such as clearing the text box while submitting or treating the text as a blank text while validating the textbox in java-script.

If you are using jquery then there are few plugins available for above functionality. For example, have a look at labelify.

<asp:TextBox ID="txtQuery" CssClass="baseVal" runat="server" Text="Enter key word or phrase"></asp:TextBox>
<script type='text/javascript'>
        function ClearMLSText() {
            if ($("#txtQuery").val() == "Enter key word or phrase") {
                $("#txtQuery").val("");
                $("#txtQuery").addClass("hasVal").removeClass("baseVal");
            }
        }

        function BaseMLSText() {
            if ($("#txtQuery").val() == "") {
                $("#txtQuery").val("Enter key word or phrase");
                $("#txtQuery").addClass("baseVal").removeClass("hasVal");
            }
        }
</script>

<style type="text/css">
 #txtQuery.baseVal { color: #999; font-style: italic; }
 #txtQuery.hasVal { color: #000; font-style: normal; }
</style>

You might also want to look at the jquery Watermark Plugin Get WaterMark Plugin

WaterMark a Text box Using javascript:

In Ajax toolkit there is watermark extender that can be added with textbox by which whenever textbox is focused the default text written in it get cleared. The same thing you can do with JavaScript use more of the JavaScript or jquery rather than using ajax toolkit as it slow down the server speed to let the page render.

for Live example visit:http://www.dotnetchallengers.com/App_Folder/Content/CodeSnippets/Java%20Script/WaterMark%20a%20Text%20box%20Using%20javascript%20Java%20Script/WaterMark_a_Text_box_Using_javascript_Java_Script.aspx?TutorialIds=17