---
title: "Using Watermark Functionality in Textbox by JQuery."  
description: "A watermark refers to text or a graphic that appears behind text. It shows the real value putting in textbox to tell the user.How we implement the wat"  
author: "Amit Singh"  
published: 2011-03-29  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/136/using-watermark-functionality-in-textbox-by-jquery  
category: "jquery"  
tags: ["jquery"]  
reading_time: 1 minute  

---

# Using Watermark Functionality in Textbox by JQuery.

A watermark refers to text or a graphic that appears behind text. It shows the real value putting in textbox to tell the user.

##### How we implement the watermark text

Step 1: Firstly we [download](https://www.mindstick.com/articles/188403/website-to-download-photos-from-instagram) the file “jquery-1.4.4.min.js” from http://docs.jquery.com/Downloading_jQuery. And include in head [section](https://yourviews.mindstick.com/view/297/reservation-for-economically-weaker-section).

Step2: Using this css for displaying [watermark text](https://www.mindstick.com/forum/210/implementing-watermark-text-in-jquery-as-similar-to-ajax-watermark-text-in-ajax-toolkit)

\
.watermarkText

{

color: silver;

font-style: italic;

}

\
Step3: Using Java Script code in head section as

\

```
<script>$(document).ready(function() {    // Define what happens when the textbox comes under focus    // Remove the watermark class and clear the box   $("#txtName").focus(function() {        $(this).filter(function() {            // We only want this to apply if there's not            // something actually entered        return $(this).val() == "" || $(this).val() == "User Name"        }).removeClass("watermarkText ").val("");    });    // Define what happens when the textbox loses focus    // Add the watermark class and default text    $("#txtName").blur(function() {        $(this).filter(function() {            // We only want this to apply if there's not            // something actually entered            return $(this).val() == ""        }).addClass("watermarkText").val("User Name");    });});</script>
```

\

Step4: Using [textbox control](https://www.mindstick.com/articles/320/textbox-control-in-vb-dot-net) within form tag\
<asp:TextBox ID="txtName" runat="[server](https://www.mindstick.com/articles/43769/what-is-serverless-architecture-is-it-worth-switching-over)" [CssClass](https://www.mindstick.com/forum/12787/how-to-get-access-to-cssclass-property-for-server-element-isn-t-webcontrol-in-asp-dot-net)="watermarkText" value="[User Name](https://www.mindstick.com/interview/33836/how-to-check-current-user-name-of-database-in-sql-server)"></asp:TextBox>

Check this simple code for using watermark [functionality](https://www.mindstick.com/interview/547/explain-about-the-functionality-of-vb-script) in textbox.

---

Original Source: https://www.mindstick.com/blog/136/using-watermark-functionality-in-textbox-by-jquery

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.