基于JQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊文本框顯示隱藏提示文本

更新時間：2012年02月23日 22:55:36 作者：

我們做搜索框的時候，經(jīng)常需要這樣一個效果：搜索框默認(rèn)顯示一段提示文本，比如“輸入關(guān)鍵詞”，鼠標(biāo)點(diǎn)擊后，清空這段文本。鼠標(biāo)再次點(diǎn)擊別的地方，又要恢復(fù)這段文本

比如本人網(wǎng)站的搜索框：

不使用的時候：

鼠標(biāo)點(diǎn)擊后：

用JQuery實(shí)現(xiàn)這個效果非常簡單，下面是代碼：

復(fù)制代碼代碼如下:

 
$(document).ready(function () { 
var searchBox = $("#ctl00_txtSearch"); 
searchBox.focus(function () { 
if (searchBox.val() == this.title) { // TextBox控件ToolTip屬性轉(zhuǎn)換為Html為title屬性 
searchBox.val(""); 
} 
}); 
searchBox.blur(function () { 
if (searchBox.val() == "") { 
searchBox.val(this.title); 
} 
}); 
searchBox.blur(); 
}); 

其中#ctl00_txtSearch是搜索框的ID（ASP.NET可以通過ClientID獲取這個ID）

您可能感興趣的文章:

相關(guān)文章

jQuery使用$.ajax進(jìn)行異步刷新的方法(附demo下載)
這篇文章主要介紹了jQuery使用$.ajax進(jìn)行異步刷新的方法,涉及jQuery實(shí)現(xiàn)ajax異步刷新實(shí)現(xiàn)數(shù)據(jù)交互的相關(guān)技巧,并提供了完整示例demo供讀者下載參考,需要的朋友可以參考下
2015-12-12
BootStrap表單驗(yàn)證中的非Submit類型按鈕點(diǎn)擊時觸發(fā)驗(yàn)證的坑
這篇文章主要介紹了BootStrap表單驗(yàn)證中的非Submit類型按鈕點(diǎn)擊時觸發(fā)驗(yàn)證的坑,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-09-09
jquery實(shí)現(xiàn)右鍵菜單插件
本文給大家分享的是使用jquery實(shí)現(xiàn)模擬右鍵菜單插件的方法和代碼分享，十分的實(shí)用，有需要的小伙伴可以參考下。
2015-03-03
jqGrid中文文檔之選項(xiàng)設(shè)置
jqGrid提供了大量的選項(xiàng)設(shè)置，開發(fā)者可以通過設(shè)置選項(xiàng)對應(yīng)值來控制jqGrid，比如表格的寬度、高度、數(shù)據(jù)類型以及列名稱等等都是通過選項(xiàng)設(shè)置來完成的
2015-12-12
jQuery實(shí)現(xiàn)簡單倒計(jì)時功能的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單倒計(jì)時功能的方法,涉及jQuery根據(jù)時間動態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下
2016-07-07
運(yùn)用jQuery寫的驗(yàn)證表單(實(shí)例講解)
下面小編就為大家?guī)硪黄\(yùn)用jQuery寫的驗(yàn)證表單(實(shí)例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
jQuery form 表單驗(yàn)證插件(fieldValue)校驗(yàn)表單
這篇文章主要介紹了jQuery form 表單驗(yàn)證插件(fieldValue)校驗(yàn)表單的相關(guān)資料,需要的朋友可以參考下
2016-01-01
jQuery插件 Jqplot圖表實(shí)例
文章內(nèi)容為初次使用Jqplot圖表插件的測試代碼，僅供參考。
2016-06-06
jQuery表格行上移下移和置頂?shù)膶?shí)現(xiàn)方法
這篇文章主要介紹了jQuery表格行上移下移和置頂?shù)膶?shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-10-10
jQuery實(shí)現(xiàn)自動調(diào)用和觸發(fā)某個事件的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)自動調(diào)用和觸發(fā)某個事件的方法,結(jié)合實(shí)例形式列舉分析了jQuery事件觸發(fā)的常見操作技巧,需要的朋友可以參考下
2016-11-11