How to apply watermark to the textbox and dropdownlist?
By James H
Create a watermark effect on your TextBox and display instructions to users, without taking up screen space. This warkmark style can applied by using the CSS and append this to your control using jquery.
Hi this is basic where we you use to get to apply watermark to the Textbox or DropDown.I
have implemented this by using the jquery.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WaterMark.aspx.cs"
Inherits="WaterMark" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Water Mark using jquery </title>
<style type="text/css">
.watermarkOn
{
color: #CCCCCC;
font-style: italic;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Define what happens when the textbox comes under focus
// Remove the watermark class and clear the box
$("#txtUserName").focus(function () {
$(this).filter(function () {
// We only want this to apply if there's not
// something actually entered
return $(this).val() == "" || $(this).val() == "Enter
your name"
}).removeClass("watermarkOn").val("");
});
// Define what happens when the textbox loses focus
// Add the watermark class and default text
$("#txtUserName").blur(function () {
$(this).filter(function () {
// We only want this to apply if there's not
// something actually entered
return $(this).val() == ""
}).addClass("watermarkOn").val("Enter your name");
});
//Apply watermark to the dropdown list
var ddlLength = $('#ddlItems option:selected').val();
if (ddlLength > 0) {
$('#ddlItems').removeClass('watermarkOn');
}
else {
$('#ddlItems')[0][0].className = "watermarkOn";
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
UserName:
<asp:TextBox ID="txtUserName" runat="server" CssClass="watermarkOn">Enter your name</asp:TextBox>
<br />
Choose any Language
<asp:DropDownList ID="ddlItems" runat="server">
<asp:ListItem Text="Select any item" Value="0"></asp:ListItem>
<asp:ListItem Text="ASP.NET" Value="1"></asp:ListItem>
<asp:ListItem Text="F#.NET" Value="3"></asp:ListItem>
<asp:ListItem Text="SQL SERVER" Value="4"></asp:ListItem>
</asp:DropDownList>
<br />
</div>
</form>
</body>
</html>
The output is shown in this
Output
How to apply watermark to the textbox and dropdownlist? (655 Views)