Please navigate to the bottom of the page for Table of Contents

Saturday, July 16, 2011

jQuery to create default text for a textbox

In the previous post we explored how to use jQuery to block paste in a textbox. In this post, let’s see how we can provide some default text (as a hint) to the user.

Question: On many complex sites, there is a search textbox that allows users to search the site for some relevant information. Explain how to provide some helper text to the user. This information should only be displayed if the textbox is not in focus and does not contain user input.

For example, on www.geocaching.com, the home page has this search box with the default text:

image

The solution to this problem is bit more involved than the block paste problem. To solve this, let’s tackle small pieces of the problem and then see the full solution at the end.

First of all, let’s define our basic text box on ASP.NET page:

<asp:TextBox runat="server" ID="searchTb"></asp:TextBox>



We will use the tooltip property to define our default text. In addition, to distinguish the default text from actual user input, let’s put some simple CSS on it. Our textbox now looks like:


<asp:TextBox runat="server" ID="searchTb" 
CssClass="searchText"
ToolTip="Enter keyword to search...">
</asp:TextBox>


Now, let us look at the jQuery counterpart. We will need to attach to the blur() and focus() events of the textbox.


For the blur() event, we we will check if the textbox is empty and if so, we will set the CSS class and default text.


For the focus() event, we will check if the textbox value is the same as the tooptip and if so, we we will remove the CSS class and empty its content.


As the final step, we will call the blur() function when the document is ready.


The complete code looks like:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DefaultText.aspx.cs" 
Inherits="jQueryInterviewQuestions.DefaultText" %>


<!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>Default Text Example</title>
<!-- include jQuery -->
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
   1:  
   2:  
   3:     <script type="text/javascript">
   4:         // when the document is ready
   5:         $(document).ready(function () 
   6:         {
   7:             // find the search box
   8:             var searchBox = $('#<%=searchTb.ClientID%>');
   9:  
  10:             // define the blur event
  11:             searchBox.blur(
  12:                 function() 
  13:                 {
  14:                     // if the value of the search textbox is empty
  15:                     if (searchBox.val() == "") 
  16:                     {
  17:                         // add the CC class
  18:                         searchBox.addClass("searchText");
  19:                         // and set the default text
  20:                         searchBox.val(this.title);
  21:                     }
  22:                 }
  23:             );
  24:  
  25:             // tap into the focus event
  26:             searchBox.focus(
  27:                 function() 
  28:                 {
  29:                     // on focus, if the text box has the default text
  30:                     if (searchBox.val() == this.title) 
  31:                     {
  32:                         // remove the text and class
  33:                         searchBox.removeClass("searchText");
  34:                         searchBox.val("");
  35:                     }
  36:                 }
  37:            );
  38:  
  39:             // call the blur function
  40:             searchBox.blur();
  41:         });
  42:     
</script>

<!-- define some simple CSS for the searchTB -->
<style type="text/css">
.searchText
{
color:Red;
font-style:italic;
}
</style>
</head>

<body>
<form id="form1" runat="server">
<p></p>
<div align="center">

What are you searching today:
<!-- the search textbox with tooltip and CSS -->
<asp:TextBox runat="server" ID="searchTb" Width="300px"
CssClass="searchText"
ToolTip="Enter keyword to search...">
</asp:TextBox>

<asp:Button runat="server" ID="searchBtn" Text="Search" />
</div>
</form>
</body>
</html>

1 comment:

  1. This can help you http://workwithphp.info/?p=8

    ReplyDelete