How to apply watermark to the textbox and dropdownlist?

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" %>
<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 nameasp: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

Comments

Post a Comment