TextBox Watermark Using JavaScript and CSS

Md.Asaduzzaman Azad

Rate me:

4.64/5 (10 votes)

29 May 2009CPOL

105.7K

Apply watermark in TextBox using JavaScript

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.

CSS

<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>

JavaScript

<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>

ASP.NET

<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>

History

29^th May, 2009: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Md.Asaduzzaman Azad

Data Path Limited

Bangladesh

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.