通常用戶在搜索內容時，在文本框輸入內容前，文本框都會給出默認提示，提示用戶輸入正確的內容進行搜索。
當文本框獲得焦點，如果文本框內容跟提示內容一樣，提示內容會自然消失。
當文本框沒有任何值并失去焦點，文本框內容會重新生成默認提示。
為了實現上面的需求，代碼如下：
?
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
>
顯示效果：
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
