快捷導(dǎo)航

jQuery實(shí)現(xiàn)HTML5 placeholder效果實(shí)例

更新時(shí)間：2014年12月09日 10:45:09 投稿：junjie

這篇文章主要介紹了jQuery實(shí)現(xiàn)HTML5 placeholder效果實(shí)例,本文目的主要是在需要兼容一些瀏覽器時(shí)使用,需要的朋友可以參考下

你一定知道 HTML5新增的 placeholder 屬性吧？不知道的也沒關(guān)系。輸入框有默認(rèn)文本是，常需要這樣一個(gè)效果，點(diǎn)擊讓默認(rèn)文本消失，失去焦點(diǎn)后讓默認(rèn)文本顯示。

今天分享一段jQuery代碼，模擬 placeholder 效果。

Javascript代碼：

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

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ì)問了，既然html5都提供這樣的功能，還有js寫干嘛？

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

您可能感興趣的文章:

相關(guān)文章

使用jquery提交form表單并自定義action的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄褂胘query提交form表單并自定義action的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
jq實(shí)現(xiàn)酷炫的鼠標(biāo)經(jīng)過圖片翻滾效果
一個(gè)酷炫的圖片翻滾效果要實(shí)現(xiàn)這個(gè)效果并不難，只要思路對(duì)了，一切都好辦，下面有個(gè)不錯(cuò)的示例，大家可以參考下
2014-03-03
jquery 判斷是否支持Placeholder屬性的方法
下面小編就為大家?guī)硪黄猨query 判斷是否支持Placeholder屬性的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
JQuery+Ajax無(wú)刷新分頁(yè)的實(shí)例代碼
本篇文章主要是對(duì)JQuery+Ajax無(wú)刷新分頁(yè)的實(shí)例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
基于jQuery實(shí)現(xiàn)左右圖片輪播（原理通用）
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)左右圖片輪播，實(shí)現(xiàn)原理通用可通用，希望能和大家分享一下思路，感興趣的小伙伴們可以參考一下
2015-12-12
jquery可定制的在線UEditor編輯器
這篇文章主要介紹了jquery可定制的在線UEditor編輯器，UEditor的功能非常強(qiáng)大，ueditor更具有功能插件接口，很輕松地添加自己定義功能到編輯器中，方便項(xiàng)目的不同需求，需要的朋友可以參考下
2015-11-11
jquery動(dòng)態(tài)導(dǎo)航插件dynamicNav用法實(shí)例分析
這篇文章主要介紹了jquery動(dòng)態(tài)導(dǎo)航插件dynamicNav用法,較為詳細(xì)的分析了jquery導(dǎo)航插件的原理及具體使用方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
JQuery入門——移除綁定事件unbind方法概述及應(yīng)用
在DOM對(duì)象的實(shí)踐操作中,存在用于綁定事件的bind方法,也會(huì)有相應(yīng)的移除綁定事件unbind方法，接下來將介紹unbind方法的使用，感興趣的朋友可以不要錯(cuò)過了啊，或許本文對(duì)你有所幫助
2013-02-02
jQuery實(shí)現(xiàn)的鼠標(biāo)響應(yīng)緩沖動(dòng)畫效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的鼠標(biāo)響應(yīng)緩沖動(dòng)畫效果,涉及jQuery事件響應(yīng)、數(shù)值運(yùn)算及頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2018-02-02
關(guān)于event.cancelBubble和event.stopPropagation()的區(qū)別介紹
cancelBubble用于ie的阻止冒泡事件，event.stopPropagation（）用于firefox和chrome等其他瀏覽器的疑惑介紹。
2011-12-12