Thursday, 20 October 2011

how to create watermark textbox using javascript


Here I will explain how to create watermark textbox using JavaScript.


One day I got requirement like showing watermark text in textbox to achieve this requirement I used JavaScript functionality for that first Design your aspx page like this

<html xmlns="">
<head runat="server">
<title>Watermark Textbox Using JavaScript</title>
<script language="javascript" type="text/javascript">
function WaterMark(txtName, event) {
var defaultText = "Enter Username Here";
// Condition to check textbox length and event type
if (txtName.value.length == 0 & event.type == "blur") {
//if condition true then setting text color and default text in textbox = "Gray";
txtName.value = defaultText;
// Condition to check textbox value and event type
if (txtName.value == defaultText & event.type == "focus") { = "black";
txtName.value = "";
<form id="form1" runat="server">
<asp:TextBox ID="txtUserName" runat="server" Text="Enter Username Here" ForeColor="Gray" onblur = "WaterMark(this, event);" onfocus = "WaterMark(this, event);" />