基于JQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊文本框顯示隱藏提示文本
更新時(shí)間：2012年02月23日 22:55:36 作者：
我們做搜索框的時(shí)候，經(jīng)常需要這樣一個(gè)效果：搜索框默認(rèn)顯示一段提示文本，比如“輸入關(guān)鍵詞”，鼠標(biāo)點(diǎn)擊后，清空這段文本。鼠標(biāo)再次點(diǎn)擊別的地方，又要恢復(fù)這段文本
比如本人網(wǎng)站的搜索框：
不使用的時(shí)候：
鼠標(biāo)點(diǎn)擊后：
用JQuery實(shí)現(xiàn)這個(gè)效果非常簡(jiǎ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可以通過(guò)ClientID獲取這個(gè)ID）
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)鏈接控制圖片的滑動(dòng)展開(kāi)與隱藏效果
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)出現(xiàn)隱藏層文字鏈接的方法
- jQuery響應(yīng)鼠標(biāo)事件并隱藏與顯示input默認(rèn)值
- jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示離開(kāi)隱藏效果
- jQuery 網(wǎng)易相冊(cè)鼠標(biāo)移動(dòng)顯示隱藏效果實(shí)現(xiàn)代碼
- 基于jquery鼠標(biāo)點(diǎn)擊其它地方隱藏層的實(shí)例代碼
- jQuery實(shí)現(xiàn)表單input中提示文字value隨鼠標(biāo)焦點(diǎn)移進(jìn)移出而顯示或隱藏的代碼
- jquery插件實(shí)現(xiàn)鼠標(biāo)隱藏
相關(guān)文章
本篇文章主要是對(duì)JQuery中操作Css樣式的方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
這篇文章主要介紹了jQuery Validate初步體驗(yàn)(二) 的相關(guān)資料,需要的朋友可以參考下2015-12-12
大家在逛淘寶的時(shí)候，把鼠標(biāo)放在寶貝上就會(huì)放大，奇怪這種效果怎么實(shí)現(xiàn)的，下面小編就給大家分享基于jquery實(shí)現(xiàn)放大鏡效果，有需要的朋友可以參考下2015-08-08
Jquery給當(dāng)前頁(yè)或者跳轉(zhuǎn)后頁(yè)面的導(dǎo)航欄添加選中后樣式的實(shí)例
下面小編就為大家?guī)?lái)一篇Jquery給當(dāng)前頁(yè)或者跳轉(zhuǎn)后頁(yè)面的導(dǎo)航欄添加選中后樣式的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
EasyUI的doCellTip實(shí)現(xiàn)鼠標(biāo)放到單元格上提示單元格內(nèi)容
本篇文章主要介紹了easyUI的doCellTip 就是鼠標(biāo)放到單元格上有個(gè)提示的功能，對(duì)于Javascript教程感興趣的同學(xué)可以參考一下2016-08-08
jQuery 獲取URL的GET參數(shù)值的小例子，需要的朋友可以參考一下2013-04-04
jquery ajax異步提交表單數(shù)據(jù)的方法
這篇文章主要為大家詳細(xì)介紹了jquery ajax異步提交表單數(shù)據(jù)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
jQuery 動(dòng)態(tài)云標(biāo)簽插件
這里推薦給大家一款jquery動(dòng)態(tài)云標(biāo)簽的插件，非常的炫，在指定塊級(jí)元素內(nèi)動(dòng)態(tài)生成a標(biāo)簽，a標(biāo)簽的高度、寬度、位置、層數(shù)、背景顏色隨機(jī)可控，a標(biāo)簽漸隱顯示和漸隱消失，可改變初始化的透明度，鼠標(biāo)懸浮停止動(dòng)畫(huà)且透明度最大，層數(shù)最高，鼠標(biāo)離開(kāi)，恢復(fù)之前狀態(tài)2014-11-11
jQuery對(duì)象與DOM對(duì)象之間的轉(zhuǎn)換方法
剛開(kāi)始學(xué)習(xí)jQuery，可能一時(shí)會(huì)分不清楚哪些是jQuery對(duì)象，哪些是DOM對(duì)象。至于DOM對(duì)象不多解釋?zhuān)覀兘佑|的太多了，下面重點(diǎn)介紹一下jQuery，以及兩者相互間的轉(zhuǎn)換。2010-04-04
jquery實(shí)現(xiàn)放大鏡簡(jiǎn)潔代碼(推薦)
這篇文章主要介紹了jquery實(shí)現(xiàn)放大鏡簡(jiǎn)潔代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-06-06