Home > ASP.Net, Javascript > Create Watermark TextBox using JavaScript

Create Watermark TextBox using JavaScript


Hi

try this example to create Watermark Textbox using javascript

<script type = "text/javascript">
    var defaultText = "Enter your text here";
    function WaterMark(txt, evt)
    {
        if(txt.value.length == 0 && evt.type == "blur")
        {
            txt.style.color = "gray";
            txt.value = defaultText;
        }
        if(txt.value == defaultText && evt.type == "focus")
        {
            txt.style.color = "black";
            txt.value="";
        }
    }
</script>

<asp:TextBox ID="txt_Name" runat="server" Text = "Enter your Name here"
    ForeColor = "Gray" onblur = "WaterMark(this, event);"
    onfocus = "WaterMark(this, event);">
</asp:TextBox>

we can access onblur and onfocus events of textbox in code behind

C#
txt_Name.Attributes.Add("onblur", "WaterMark(this, event);");
txt_Name.Attributes.Add("onfocus", "WaterMark(this, event);");

Hope this helps

Good Luck

Categories: ASP.Net, Javascript
  1. November 18, 2011 at 12:09 pm

    Thanks a lot. Nice demo.

  1. No trackbacks yet.

Leave a comment