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