How To Use Watermark In ASP.NET Textbox Using JavaScript

In this blog, we learn about watermark in ASP.NET textbox, using JavaScript.

Step 1

 

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

 

Step 2

 

Prior to it, we need to create a new ASP.NET application and add a textbox control on the page. For this, create a new ASP.NET code, which is given below.

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

Step 3

 

Subsequently, we will add a JavaScript Code to display a watermark on the textbox given below. 

<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>

Step 4

 

Now, JavaScript function is used as a parameter value, which will be used as a watermark textbox.

 

Step 5

 

When a user will focus on a  textbox, the watermark text will disappear and on removing the mouse, the water mark text will appear. In some cases, until the user types, it will remain the same.

 

Conclusion

 

Now, the water mark textbox is created, using JavaScript. Feel free to comment with some suggestions. Thank you.