通常用户在搜索内容时，在文本框输入内容前，文本框都会给出默认提示，提示用户输入正确的内容进行搜索。
当文本框获得焦点，如果文本框内容跟提示内容一样，提示内容会自然消失。
当文本框没有任何值并失去焦点，文本框内容会重新生成默认提示。
为了实现上面的需求，代码如下：
View Code
1
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
Recipe1.aspx.cs
"
Inherits
=
"
Recipe1
"
%>
2
3
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
4
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
5
<
head
runat
="server"
>
6
<
title
>
Recipe1
</
title
>
7
<
script
src
="Scripts/jquery-1.4.1-vsdoc.js"
type
="text/javascript"
></
script
>
8
<
style
type
="text/css"
>
9
.defaultText
10
{
11
font-style
:
italic
;
12
color
:
#CCCCCC
;
13
}
14
</
style
>
15
<
script
type
="text/javascript"
>
16
$(document).ready(
function
() {
17
var
searchBox
=
$(
"
#<%=txtSearch.ClientID %>
"
);
//
通过ClientID获取服务器控件ID
18
searchBox.focus(
function
() {
19
if
(searchBox.val()
==
this
.title) {
//
TextBox控件ToolTip属性转换为Html为title属性
20
searchBox.val(
""
);
21
searchBox.removeClass(
"
defaultText
"
);
22
}
23
});
24
searchBox.blur(
function
() {
25
if
(searchBox.val()
==
""
) {
26
searchBox.val(
this
.title);
27
searchBox.addClass(
"
defaultText
"
);
28
}
29
});
30
searchBox.blur();
31
});
32
</
script
>
33
</
head
>
34
<
body
>
35
<
form
id
="form1"
runat
="server"
>
36
<
p
>
37
</
p
>
38
<
div
align
="center"
>
39
<
fieldset
style
="width: 400px; height: 80px;"
>
40
<
p
>
41
<
asp:TextBox
ID
="txtSearch"
runat
="server"
Width
="200px"
CssClass
="defaultText"
ToolTip
="请输入搜索的关键字"
></
asp:TextBox
>
42
<
asp:Button
ID
="btnSearch"
runat
="server"
Text
="搜索"
/></
p
>
43
</
fieldset
>
44
</
div
>
45
</
form
>
46
</
body
>
47
</
html
>
显示效果：
