function placeHolder(event){

  var self = $(this), selfDataValue = self.attr("data-value"), selfValue = self.val();

  if(selfDataValue){

   event.type == "click" ? (selfValue == selfDataValue && (self.val("").css("color","#333"))) : (event.type == "blur" && (selfValue == "" && (self.val(selfDataValue).css("color","#A9A9A9"))))

  }else{

   return false;

  }

}

$(".pInputText").on("click blur",placeHolder);

Html代碼：

復(fù)制代碼代碼如下:

可能有人會(huì)問(wèn)了，既然html5都提供這樣的功能，還有js寫(xiě)干嘛？

這不是廢話嗎，當(dāng)然是以為兼容問(wèn)題，IE要是對(duì)HTML5兼容好點(diǎn)的話，誰(shuí)愿意用js去實(shí)現(xiàn)這玩意兒啊。

您可能感興趣的文章:

相關(guān)文章

jQuery中的通配符選擇器使用總結(jié)
通配符在控制input標(biāo)簽時(shí)相當(dāng)好用,這里簡(jiǎn)單進(jìn)行了jQuery中的通配符選擇器使用總結(jié),需要的朋友可以參考下
2016-05-05
jQuery實(shí)現(xiàn)向下滑出的平滑下拉菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)向下滑出的平滑下拉菜單效果的方法,涉及jquery鼠標(biāo)事件及頁(yè)面元素樣式的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
jQuery 使用手冊(cè)(五)
jQuery 使用手冊(cè)，大家可以耐心的看完，就基本上入門(mén)了。
2009-09-09
jQuery獲取table下某一行某一列的值實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery獲取table下某一行某一列的值實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下
2017-04-04
JQuery解析XML數(shù)據(jù)的幾個(gè)簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JQuery解析XML數(shù)據(jù)的幾個(gè)簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
jquery實(shí)現(xiàn)邊框特效
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)邊框特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
jQuery移動(dòng)web開(kāi)發(fā)之頁(yè)面跳轉(zhuǎn)和加載外部頁(yè)面的實(shí)現(xiàn)
這篇文章主要介紹了jQuery移動(dòng)web開(kāi)發(fā)之頁(yè)面跳轉(zhuǎn)和加載外部頁(yè)面的實(shí)現(xiàn),以changePage()和loadPage()方法的使用為主,需要的朋友可以參考下
2015-12-12
jQuery提交表單ajax查詢(xún)實(shí)例代碼
用戶(hù)輸入一個(gè)表單，輸入準(zhǔn)考證和驗(yàn)證碼，驗(yàn)證用戶(hù)是否輸入表單，點(diǎn)擊查詢(xún)提交，然后從服務(wù)器得到返回的數(shù)據(jù)并顯示出來(lái)
2012-10-10
jQuery1.6 使用方法一
jQuery1.6 使用方法1，想要學(xué)習(xí)jquery的朋友可以參考下。
2011-11-11
jQuery實(shí)現(xiàn)仿Alipay支付寶首頁(yè)全屏焦點(diǎn)圖切換特效
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿Alipay支付寶首頁(yè)全屏焦點(diǎn)圖切換特效,涉及jQuery插件jquery.kinMaxShow的相關(guān)使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-05-05