jquery實(shí)現(xiàn)非疊加式的搜索框提示效果
更新時(shí)間：2014年01月07日 16:26:39 作者：
用JQUERY疊加兩個(gè)INPUT框來(lái)實(shí)現(xiàn)登陸中需要輸入的用戶名、密碼來(lái)實(shí)現(xiàn)提示與用戶的輸出，使用jquery在一個(gè)INPUT框中即可實(shí)現(xiàn)
以前一直在用JQUERY疊加兩個(gè)INPUT框來(lái)實(shí)現(xiàn)登陸中需要輸入的用戶名、密碼來(lái)實(shí)現(xiàn)提示與用戶的輸出，這邊采用JQUERY在一個(gè)INPUT框中實(shí)現(xiàn)這種效果，具體做法為：
下面是INPUT框代碼：
<input class="search_text" type="text" value="搜索" name="searchText" />
下面是JQUERY代碼：
//設(shè)置搜索的默認(rèn)值
$(".search_text").focus(function(){
<span style="white-space:pre"> </span>if($(".search_text").val()=='搜索'){
<span style="white-space:pre"> </span>$(".search_text").val("");
<span style="white-space:pre"> </span>}else{
<span style="white-space:pre"> </span>$(".search_text").val($(".search_text").val());
<span style="white-space:pre"> </span>}
});
$(".search_text").blur(function(){
<span style="white-space:pre"> </span>if($(".search_text").val()==''){
<span style="white-space:pre"> </span>$(".search_text").val("搜索");
<span style="white-space:pre"> </span>}else{
<span style="white-space:pre"> </span>$(".search_text").val($(".search_text").val());
<span style="white-space:pre"> </span>}
});
格式神馬的我就不調(diào)整了，畢竟不是編程中使用的IDE編輯器，有興趣的話，可以看下喲！
下面是INPUT框代碼：
復(fù)制代碼 代碼如下:
<input class="search_text" type="text" value="搜索" name="searchText" />
下面是JQUERY代碼：
復(fù)制代碼 代碼如下:
//設(shè)置搜索的默認(rèn)值
$(".search_text").focus(function(){
<span style="white-space:pre"> </span>if($(".search_text").val()=='搜索'){
<span style="white-space:pre"> </span>$(".search_text").val("");
<span style="white-space:pre"> </span>}else{
<span style="white-space:pre"> </span>$(".search_text").val($(".search_text").val());
<span style="white-space:pre"> </span>}
});
$(".search_text").blur(function(){
<span style="white-space:pre"> </span>if($(".search_text").val()==''){
<span style="white-space:pre"> </span>$(".search_text").val("搜索");
<span style="white-space:pre"> </span>}else{
<span style="white-space:pre"> </span>$(".search_text").val($(".search_text").val());
<span style="white-space:pre"> </span>}
});
格式神馬的我就不調(diào)整了，畢竟不是編程中使用的IDE編輯器，有興趣的話，可以看下喲！
您可能感興趣的文章:
- 讓input框?qū)崿F(xiàn)類似百度的搜索提示(基于jquery事件監(jiān)聽(tīng))
- Jquery實(shí)現(xiàn)搜索框提示功能示例代碼
- jquery+php實(shí)現(xiàn)搜索框自動(dòng)提示
- jquery 模擬類搜索框自動(dòng)完成搜索提示功能(改進(jìn))
- jQuery 插件仿百度搜索框智能提示(帶Value值)
- 利用JQuery為搜索欄增加tag提示
- Jquery模仿Baidu、Google搜索時(shí)自動(dòng)補(bǔ)充搜索結(jié)果提示
- jquery 關(guān)鍵字“拖曳搜索”之“拖曳”以及 圖片“提示自適應(yīng)放大”效果 的實(shí)現(xiàn)
- asp.net使用jquery實(shí)現(xiàn)搜索框默認(rèn)提示功能
- 基于jQueryUI和Corethink實(shí)現(xiàn)百度的搜索提示功能
- jQuery實(shí)現(xiàn)模擬搜索引擎的智能提示功能簡(jiǎn)單示例
相關(guān)文章
![11款新鮮的jQuery插件[附所有demo下載]](http://img.jbzj.com/images/xgimg/bcimg0.png)
每天都會(huì)有新的jQuery插件誕生，這里和大家分享最新出爐的11款在實(shí)際項(xiàng)目中可能用到的jQuery插件，提供整理后的實(shí)例下載。2011-01-01
Jquery截取中文字符串的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-12-12
jQuery插件HighCharts繪制2D圓環(huán)圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D圓環(huán)圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts插件繪制圓環(huán)圖的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
Jquery和angularjs獲取check框選中的值的方法匯總
本文分別通過(guò)具體的實(shí)例向大家展示了jquery和angularjs獲取獲取check框選中的值的方法，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下2016-01-01
jQuery操作input type=radio的實(shí)現(xiàn)代碼
jQuery操作input type=radio的實(shí)現(xiàn)代碼，需要的朋友可以參考下2012-06-06
高效Web開(kāi)發(fā)的10個(gè)jQuery代碼片段
這篇文章主要為大家詳細(xì)介紹了高效Web開(kāi)發(fā)的10個(gè)jQuery代碼片段，具有一定的實(shí)用性和參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
一款Jquery 分頁(yè)插件的改造方法（服務(wù)器端分頁(yè)）
分頁(yè)幾乎是每個(gè)外部程序必不可少的東西，在webform時(shí)代很多人都用過(guò)AspNetPager這個(gè)用戶控件吧，用的人之多其實(shí)就在于它的優(yōu)點(diǎn)2011-07-07
jQuery EasyUI API 中文文檔 - Dialog對(duì)話框
jQuery EasyUI API 中文文檔 - Dialog對(duì)話框使用說(shuō)明，需要的朋友可以參考下。2011-11-11
50 個(gè) jQuery 插件可將你的網(wǎng)站帶到另外一個(gè)高度
Query架構(gòu)的開(kāi)發(fā)人員能夠創(chuàng)建一個(gè)插件代碼來(lái)擴(kuò)展其功能，從而能夠產(chǎn)生一些最好的插件，讓你的網(wǎng)站或任何給定的項(xiàng)目達(dá)到一個(gè)全新的水平。2016-04-04
簡(jiǎn)單的jQuery banner圖片輪播實(shí)例代碼
這篇文章主要介紹了簡(jiǎn)單的jQuery banner圖片輪播實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-03-03