WaterMark in ASP.Net TextBox using JavaScript in C# VB.Net Application

Basically developers use WaterMark in TextBox to give users a small hints to input valid or meaningful data. The concept is TextBox initially loaded with a hints information in a gray text like “Enter Email”, “Enter Password” etc. When user click on the TextBox or set focus on the TextBox then the WaterMark text or hints text will remove automatically. We found a lot of way to WaterMark a TextBox using Javascript. But in this article or tutorial I will explain a very simple and easy way to implement WaterMark in TextBox / TextArea / MultiLine TextBox in Asp.net C# VB.Net web pages or applications. A sample output is given below:


The main javascript method to implement WaterMark is:

<script type="text/javascript">
    function WaterMarkFocus(txt, text) {
        if (txt.value == text) {
            txt.value = "";
            txt.style.color = "black";

    function WaterMarkBlur(txt, text) {
        if (txt.value == "") {
            txt.value = text;
            txt.style.color = "gray";

Now add a TextBox & Search Button in Aspx page Like Below:

        <asp:textbox ID="txtSearch" Text="Use ; as a separator" Font-Bold="true" onfocus="WaterMarkFocus(this,'Use ; as a separator')" onblur="WaterMarkBlur(this,'Use ; as a separator')"  runat="server" ForeColor="gray" ></asp:textbox>    
        <asp:Button runat="server" ID="cmdButton" Text="Search" />

Hope now one can implement WaterMark easily. You can apply the above technique for MultiLine TextBox & TextArea as well.

Script tested for:
1. Internet Explorer
2. Mozilla Firefox
3. Opera
4. Google Chrome

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Asp.net, C#, Client, Javascript, JQuery, VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *