TextBox Watermark Using JavaScript and CSS

Introduction

In this article, I will explain how watermark textbox using JavaScript and CSS is very useful and uses less resources compared to AJAX.

Overview

JavaScript is used to implement TextBox ‘onfocus’ and ‘onblur’ event and CSS is used to decorate TextBox.

Using the Code

a.Bind the onfucus event to remove watermark and the onblur event to decorate textbox as watermark.

 <style type="text/css">
        .WaterMarkedTextBox
        {
            height: 16px;
            width: 168px;
            padding: 2px 2 2 2px;
            border: 1px solid #BEBEBE;
            background-color: #F0F8FF;
            color: gray;
            font-size: 8pt;
            text-align: center;
        }
        .WaterMarkedTextBoxPSW
        {
            background-position: center;
            height: 16px;
            width: 168px;
            padding: 2px 2 2 2px;
            border: 1px solid #BEBEBE;
            background-color: #F0F8FF;
            color: white;
            vertical-align: middle;
            text-align: right;
            background-image: url(Images/psw_wMark.png);
            background-repeat: no-repeat;
        }
        .NormalTextBox
        {
            height: 16px;
            width: 168px;
        }
    </style>

 <script language="javascript" type="text/javascript">
        function Focus(objname, waterMarkText) {
            obj = document.getElementById(objname);
            if (obj.value == waterMarkText) {
                obj.value = "";
                obj.className = "NormalTextBox";
                if (obj.value == "User ID" || obj.value == "" || obj.value == null) {
                    obj.style.color = "black";
                }
            }
        }
        function Blur(objname, waterMarkText) {
            obj = document.getElementById(objname);
            if (obj.value == "") {
                obj.value = waterMarkText;
                if (objname != "txtPwd") {
                    obj.className = "WaterMarkedTextBox";
                }
                else {
                    obj.className = "WaterMarkedTextBoxPSW";
                }
            }
            else {
                obj.className = "NormalTextBox";
            }

            if (obj.value == "User ID" || obj.value == "" || obj.value == null) {
                obj.style.color = "gray";
            }
        }
    </script>

<body>
    <form id="form1" runat="server">
    <div>
        <h3>
            Watermark Textbox using JavaScript and CSS</h3>
    </div>
    <table>
        <tr>
            <td>
                User Id
            </td>
            <td>
                <asp:TextBox ID="txtUserId" runat="server" 
		onfocus="Focus(this.id,'User ID')"
                    onblur="Blur(this.id,'User ID')" 
		    Width="126px" CssClass="WaterMarkedTextBox">User ID</asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                Password
            </td>
            <td>
                <asp:TextBox ID="txtPwd" TextMode="Password" 
		runat="server" onfocus="Focus(this.id,'')"
                    onblur="Blur(this.id,'')" Width="126px" 
			CssClass="WaterMarkedTextBoxPSW" />
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <asp:Button ID="Button1" runat="server" Text="Submit" />
            </td>
        </tr>
    </table>
    </form>
</body>