jquery實現非疊加式的搜索框提示效果
更新時間:2014年01月07日 16:26:39 作者:
用JQUERY疊加兩個INPUT框來實現登陸中需要輸入的用戶名、密碼來實現提示與用戶的輸出,使用jquery在一個INPUT框中即可實現
以前一直在用JQUERY疊加兩個INPUT框來實現登陸中需要輸入的用戶名、密碼來實現提示與用戶的輸出,這邊采用JQUERY在一個INPUT框中實現這種效果,具體做法為:
下面是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框實現類似百度的搜索提示(基于jquery事件監(jiān)聽)
- Jquery實現搜索框提示功能示例代碼
- jquery+php實現搜索框自動提示
- jquery 模擬類搜索框自動完成搜索提示功能(改進)
- jQuery 插件仿百度搜索框智能提示(帶Value值)
- 利用JQuery為搜索欄增加tag提示
- Jquery模仿Baidu、Google搜索時自動補充搜索結果提示
- jquery 關鍵字“拖曳搜索”之“拖曳”以及 圖片“提示自適應放大”效果 的實現
- asp.net使用jquery實現搜索框默認提示功能
- 基于jQueryUI和Corethink實現百度的搜索提示功能
- jQuery實現模擬搜索引擎的智能提示功能簡單示例
相關文章
Jquery檢驗手機號是否符合規(guī)則并根據手機號檢測結果將提交按鈕設為不同狀態(tài)
接了個項目做,需要是這樣的:輸入手機號,實時判斷輸入的手機號是否符合規(guī)則,如果不符合怎么處理,符合又怎么處理等一系列問題,本篇文章給大家介紹Jquery檢驗手機號是否符合規(guī)則并根據手機號檢測結果將提交按鈕設為不同狀態(tài),感興趣的朋友參考下2015-11-11jQuery DataTables插件自定義Ajax分頁實例解析
這篇文章主要為大家詳細介紹了jQuery DataTables插件自定義Ajax分頁的相關資料,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05