Tuesday, March 2, 2010

WaterMark in ASP.Net TextBox Multiline TextBox TextArea using JavaScript

Basically developers use watermark textbox to give a small hint to the user to input valid or meaningfull data. We found a lot of way to watermark a TextBox using Javascript but in this article or tutorial i will explain a very simple and easy way to implement watermark in textbox / textarea / multiline TextBox. A sample output is given below:

Watermark TextBox

The main javascript method to implement watermark is:
function WaterMarkFocus(txt, text) 
        {
            if (txt.value == text) 
            {
                txt.value = "";
                txt.style.color = "black";
            }
        }

        function WaterMarkBlur(txt, text) 
        {
            if (txt.value == "") 
            {
                txt.value = text;
                txt.style.color = "gray";
            }
        }
To implement the above sample output add an aspx page into your project then enter the below HTML markup:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Watermark_TextBox.aspx.cs" Inherits="Watermark_TextBox" %>

<!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>How to Implement Watermark TextBox</title>

<script language="javascript" type="text/javascript">
        function WaterMarkFocus(txt, text) 
        {
            if (txt.value == text) 
            {
                txt.value = "";
                txt.style.color = "black";
            }
        }

        function WaterMarkBlur(txt, text) 
        {
            if (txt.value == "") 
            {
                txt.value = text;
                txt.style.color = "gray";
            }
        }
    </script>    

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:textbox ID="txtSearch" Text="Use ; as a separator" onfocus="WaterMarkFocus(this,'Use ; as a separator')" onblur="WaterMarkBlur(this,'Use ; as a separator')"  runat="server" ForeColor="gray" ></asp:textbox>    
        <asp:Button runat="server" ID="cmdButton" Text="Search" />
    </div>
    </form>
</body>
</html>

Hope now one can implement watermark easily. You can apply the above technique for multiline TextBox TextArea as well.

0 comments:

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash