快捷導(dǎo)航

jQuery簡單實現(xiàn)input文本框內(nèi)灰色提示文本效果的方法

更新時間：2015年12月02日 12:15:10 作者：aochen

這篇文章主要介紹了jQuery簡單實現(xiàn)input文本框內(nèi)灰色提示文本效果的方法,涉及jQuery針對頁面元素的遍歷與樣式動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jQuery簡單實現(xiàn)input文本框內(nèi)灰色提示文本效果的方法。分享給大家供大家參考，具體如下：

$(function(){  
  $(".grayTips").each(function(){ //遍歷每個文本框
    var objTextBox=$(this);
    var oldText=$.trim(objTextBox.val());
    objTextBox.css("color","#888"); 
    objTextBox.focus(function(){
      if(objTextBox.val()!=oldText){
        objTextBox.css("color","#000");
      }
      else{
        objTextBox.val("").css("color","#888");
      }
    });
    objTextBox.blur(function(){
      if(objTextBox.val()==""){
        objTextBox.val(oldText).css("color","#888");
      }
    });
    objTextBox.keydown(function(){
      objTextBox.css("color","#000");
    });
  });
});

說明：需要引入jquery.js文件 input和TextBox都有效

$(function(){
 $(".grayTip").each(function(){
  var $input=$(this);
  $input.css("color","#888");
  var oldText=$.trim($input.val());
  $input.focus(function(){
  var newText=$.trim($input.val());
  if (newText==oldText){
   $input.val("");   
  }
  $input.css("color","#000");
  });
  $input.blur(function(){
  var newText=$.trim($input.val());
  if(newText==""){
   $input.val(oldText);
   $input.css("color","#888");
  }
  });
 }); 
});

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

詳解bootstrap用dropdown-menu實現(xiàn)上下文菜單
這篇文章主要介紹了詳解bootstrap用dropdown-menu實現(xiàn)上下文菜單的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下
2017-09-09
jquery實現(xiàn)通用的內(nèi)容漸顯Tab選項卡效果
這篇文章主要介紹了jquery實現(xiàn)通用的內(nèi)容漸顯Tab選項卡效果,涉及jquery通過時間函數(shù)定時觸發(fā)頁面元素樣式變換的功能,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09
jQuery get和post 方法傳值注意事項
用 jQuery 的都知道，jQuery 的 get 和 post 方法有三個參數(shù)：地址，數(shù)據(jù) 和回調(diào)函數(shù)，但我們知道地址也可以跟隨數(shù)據(jù)的（形如：get_data.php?v1=1&v2=2），而且第二個參數(shù)可以省略，即第二個參數(shù)可以直接寫回調(diào)函數(shù)，那么數(shù)據(jù)寫在地址后面和寫在 data 參數(shù)里有什么區(qū)別呢？
2009-11-11
五個jQuery圖片畫廊插件推薦
五個jQuery圖片畫廊插件，需要的朋友可以參考下。
2011-05-05
jquery模擬實現(xiàn)鼠標指針停止運動事件
這篇文章主要介紹了jquery模擬實現(xiàn)鼠標指針停止運動事件示例代碼，感興趣的小伙伴們可以參考一下
2016-01-01
基于jquery實現(xiàn)圖片相關(guān)操作（重繪、獲取尺寸、調(diào)整大小、縮放）
這篇文章主要介紹了基于jquery實現(xiàn)圖片相關(guān)操作，包括圖片重繪、圖片獲取尺寸、圖片調(diào)整大小、圖片縮放，感興趣的小伙伴們可以參考一下
2015-12-12
jquery的ajax如何使用ajaxSetup做全局請求攔截
在Web開發(fā)中,Ajax是一種常用的前后端數(shù)據(jù)交互技術(shù),由于業(yè)務(wù)需求的復(fù)雜性和安全性的考慮,我們可能需要對Ajax請求進行全局攔截和處理,以便統(tǒng)一處理一些共性問題,如權(quán)限驗證、錯誤處理等,本項目方案將介紹如何使用jQuery的Ajax實現(xiàn)全局請求攔截
2023-11-11
Jquery原生態(tài)實現(xiàn)表格header頭隨滾動條滾動而滾動
表頭是浮動的，因為內(nèi)容在同一頁面展示，當(dāng)滾動時，看不到列頭，為了改動少只能使用jquery原生態(tài)實現(xiàn)滾動
2014-03-03
jQuery學(xué)習(xí)筆記之jQuery動畫效果
本次學(xué)習(xí)分為兩個文件的測試，第一個是基本動畫，第二個是滑動和透明動畫效果，分別如下
2013-09-09
jQuery動畫與特效詳解
本文主要是講解和學(xué)習(xí)jQuery的自動顯隱，漸入漸出、飛入飛出、自定義動畫等。非常詳細，這里推薦給有需要的小伙伴。
2015-02-02