Tuesday, January 22, 2013

Watermark in textbox using JavaScript

In the web application development, developers always try to make UI more user-friendly and interactively. Showing watermark on textbox is one of the tools to increase user-interactivity of website. Most of the sites use the watermark mainly for “Search” functionality. In this post I will show you a simple implementation of watermark in textbox using JavaScript.
So, let’s start the watermark implementation in textbox.

1- Aspx Page
<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtWatermarkDemo" runat="server" CssClass="watermark"></asp:TextBox>
    </div>
 </form>

2- CSS styles for watermark and simple textbox
<style type="text/css">
        .watermark
        {
            font-style:italic;
            font-size:12px;
            color:#C0C0C0;
            width:150px;
        }
        .textbox
        {
            font-style:normal;
            font-size:12px;
            color:#000000;
            width:150px;
        }
    </style>

3- JavaScript Code for watermark
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
//function to remove the search keyword when focus is on textbox
        function onFocusWatermark(txtid,strWatermark) {
            var txtval = txtid.value;
            if (txtval == strWatermark) {
                $(txtid).addClass('textbox');
                $(txtid).removeClass('watermark');              
                txtid.value = '';
            }
        }

//function to show the search keyword when leave the textbox empty
        function onBlurWatermark(txtid, strWatermark) {
            var txtval = txtid.value;
            if (txtval == '') {
                $(txtid).removeClass('textbox');
                $(txtid).addClass('watermark');           
                txtid.value = strWatermark;
            }
        }
 </script>

4- Code behind
protected void Page_Load(object sender, EventArgs e)
{
   if (!IsPostBack)
   {
     string strSearch = "Search";
     txtWatermarkDemo.Text = strSearch;
     txtWatermarkDemo.Attributes.Add("onFocus", "onFocusWatermark(this,'" + strSearch + "')");
     txtWatermarkDemo.Attributes.Add("onBlur", "onBlurWatermark(this,'" + strSearch + "')");
  }
}

In the code behind I have added onFocus and onBlur properties to asp.net textbox for referencing the relevant JavaScript function.
Here you can see the complete implementation of watermark in textbox.
Happy coding!!
kick it on DotNetKicks.com

1 comment:

If You Enjoyed This Post Please Take 5 Seconds To Share It.

^ Scroll to Top hgpromo