通常用戶在搜索內(nèi)容時(shí)，在文本框輸入內(nèi)容前，文本框都會(huì)給出默認(rèn)提示，提示用戶輸入正確的內(nèi)容進(jìn)行搜索。
當(dāng)文本框獲得焦點(diǎn)，如果文本框內(nèi)容跟提示內(nèi)容一樣，提示內(nèi)容會(huì)自然消失。
當(dāng)文本框沒(méi)有任何值并失去焦點(diǎn)，文本框內(nèi)容會(huì)重新生成默認(rèn)提示。
為了實(shí)現(xiàn)上面的需求，代碼如下：
?
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 %>
"
);
//
通過(guò)ClientID獲取服務(wù)器控件ID
18
searchBox.focus(
function
() {
19
if
(searchBox.val()
==
this
.title) {
//
TextBox控件ToolTip屬性轉(zhuǎn)換為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
="請(qǐng)輸入搜索的關(guān)鍵字"
></
asp:TextBox
>
42
<
asp:Button
ID
="btnSearch"
runat
="server"
Text
="搜索"
/></
p
>
43
</
fieldset
>
44
</
div
>
45
</
form
>
46
</
body
>
47
</
html
>
顯示效果：
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
