<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css" >
.defaultText
{
font-style:italic;
color:#CCCCCC;
}
</style>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(
function () {
var searchBox = $('#<%= txtSearch.ClientID %>') //retrieve textbox control using its clientid
searchBox.focus(function () {
if (searchBox.val() == this.title) { //On the focus event, check if it contains the default text
searchBox.removeClass("defaultText");//If yes, then remove the defaultText css style
searchBox.val(""); //clear the search field
}
});
searchBox.blur(function () {
if (searchBox.val() == "") {//On the blur event, check if the TextBox is empty
searchBox.val(this.title); //If yes, then attach the "defaultText" css style
searchBox.addClass("defaultText"); //Add the default information text to the search field
}
});
searchBox.blur(); //Call the blur event on page load so that the TextBox is initially out of focus
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtSearch" runat="server" Width="200px" CssClass="defaultText" ToolTip="Enter your search key work"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" Text="Search" />
</div>
</form>
</body>
</html>
<head runat="server">
<title></title>
<style type="text/css" >
.defaultText
{
font-style:italic;
color:#CCCCCC;
}
</style>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(
function () {
var searchBox = $('#<%= txtSearch.ClientID %>') //retrieve textbox control using its clientid
searchBox.focus(function () {
if (searchBox.val() == this.title) { //On the focus event, check if it contains the default text
searchBox.removeClass("defaultText");//If yes, then remove the defaultText css style
searchBox.val(""); //clear the search field
}
});
searchBox.blur(function () {
if (searchBox.val() == "") {//On the blur event, check if the TextBox is empty
searchBox.val(this.title); //If yes, then attach the "defaultText" css style
searchBox.addClass("defaultText"); //Add the default information text to the search field
}
});
searchBox.blur(); //Call the blur event on page load so that the TextBox is initially out of focus
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtSearch" runat="server" Width="200px" CssClass="defaultText" ToolTip="Enter your search key work"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" Text="Search" />
</div>
</form>
</body>
</html>
