WaterMark In ASP.NET TextBox Using JavaScript

In this blog, you will learn, how you can display a watermark in a textbox of ASP.NET, using JavaScript.

This blog will show you, how you can display a watermark in a textbox of ASP.NET, using JavaScript. For this, we will create a new ASP.NET Application and add a textbox control on the page.

<div>
    Username :<asp:textbox ID="txtUserName" Text="Use ; as a separator" Font-Bold="true" onfocus="WaterMarkFocus(this,'Enter your username')" onblur="WaterMarkBlur(this,'Enter your username')" runat="server" ForeColor="gray"></asp:textbox>
</div>

After this, we will add JavaScript code, given below, to display the watermark. 

<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";
        }
    }
</script>

This JavaScript function uses a parameter value. This value will be used as a watermark text. When a user makes a focus on textbox, watermark text will disappear and on removing the mouse, watermark text will appear. In case the user types some text, it will remain the same.