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 屬性吧？不知道的也沒(méi)關(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ù)制代碼 代碼如下:
<input type="text" value="在此處搜索" class="pInputText" />
可能有人會(huì)問(wèn)了，既然html5都提供這樣的功能，還有js寫(xiě)干嘛？
這不是廢話嗎，當(dāng)然是以為兼容問(wèn)題，IE要是對(duì)HTML5兼容好點(diǎn)的話，誰(shuí)愿意用js去實(shí)現(xiàn)這玩意兒啊。
您可能感興趣的文章:
- 兩種方法基于jQuery實(shí)現(xiàn)IE瀏覽器兼容placeholder效果
- 使用jQuery快速解決input中placeholder值在ie中無(wú)法支持的問(wèn)題
- IE下支持文本框和密碼框placeholder效果的JQuery插件分享
- 基于jQuery的讓非HTML5瀏覽器支持placeholder屬性的代碼
- jQuery實(shí)現(xiàn)的一個(gè)自定義Placeholder屬性插件
- jQuery實(shí)現(xiàn)的placeholder效果完整實(shí)例
- jQuery插件EnPlaceholder實(shí)現(xiàn)輸入框提示文字
- jquery實(shí)現(xiàn)（textarea）placeholder自動(dòng)換行
- jquery 判斷是否支持Placeholder屬性的方法
- jQuery封裝placeholder效果實(shí)現(xiàn)方法,讓低版本瀏覽器支持該效果
- jQuery實(shí)現(xiàn)IE輸入框完成placeholder標(biāo)簽功能的方法
相關(guān)文章
使用jquery提交form表單并自定義action的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇使用jquery提交form表單并自定義action的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
jq實(shí)現(xiàn)酷炫的鼠標(biāo)經(jīng)過(guò)圖片翻滾效果
一個(gè)酷炫的圖片翻滾效果要實(shí)現(xiàn)這個(gè)效果并不難，只要思路對(duì)了，一切都好辦，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-03-03
下面小編就為大家?guī)?lái)一篇jquery 判斷是否支持Placeholder屬性的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
JQuery+Ajax無(wú)刷新分頁(yè)的實(shí)例代碼
本篇文章主要是對(duì)JQuery+Ajax無(wú)刷新分頁(yè)的實(shí)例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
基于jQuery實(shí)現(xiàn)左右圖片輪播（原理通用）
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)左右圖片輪播，實(shí)現(xiàn)原理通用可通用，希望能和大家分享一下思路，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了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入門(mén)——移除綁定事件unbind方法概述及應(yīng)用
在DOM對(duì)象的實(shí)踐操作中,存在用于綁定事件的bind方法,也會(huì)有相應(yīng)的移除綁定事件unbind方法，接下來(lái)將介紹unbind方法的使用，感興趣的朋友可以不要錯(cuò)過(guò)了啊，或許本文對(duì)你有所幫助2013-02-02
jQuery實(shí)現(xiàn)的鼠標(biāo)響應(yīng)緩沖動(dòng)畫(huà)效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的鼠標(biāo)響應(yīng)緩沖動(dòng)畫(huà)效果,涉及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