jQuery實現(xiàn)HTML5 placeholder效果實例
更新時間：2014年12月09日 10:45:09 投稿：junjie
這篇文章主要介紹了jQuery實現(xiàn)HTML5 placeholder效果實例,本文目的主要是在需要兼容一些瀏覽器時使用,需要的朋友可以參考下
你一定知道 HTML5新增的 placeholder 屬性吧？不知道的也沒關系。輸入框有默認文本是，常需要這樣一個效果，點擊讓默認文本消失，失去焦點后讓默認文本顯示。
今天分享一段jQuery代碼，模擬 placeholder 效果。
Javascript代碼：
復制代碼 代碼如下:
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代碼：
復制代碼 代碼如下:
<input type="text" value="在此處搜索" class="pInputText" />
可能有人會問了，既然html5都提供這樣的功能，還有js寫干嘛？
這不是廢話嗎，當然是以為兼容問題，IE要是對HTML5兼容好點的話，誰愿意用js去實現(xiàn)這玩意兒啊。
您可能感興趣的文章:
- 兩種方法基于jQuery實現(xiàn)IE瀏覽器兼容placeholder效果
- 使用jQuery快速解決input中placeholder值在ie中無法支持的問題
- IE下支持文本框和密碼框placeholder效果的JQuery插件分享
- 基于jQuery的讓非HTML5瀏覽器支持placeholder屬性的代碼
- jQuery實現(xiàn)的一個自定義Placeholder屬性插件
- jQuery實現(xiàn)的placeholder效果完整實例
- jQuery插件EnPlaceholder實現(xiàn)輸入框提示文字
- jquery實現(xiàn)（textarea）placeholder自動換行
- jquery 判斷是否支持Placeholder屬性的方法
- jQuery封裝placeholder效果實現(xiàn)方法,讓低版本瀏覽器支持該效果
- jQuery實現(xiàn)IE輸入框完成placeholder標簽功能的方法
相關文章
使用jquery提交form表單并自定義action的實現(xiàn)代碼
下面小編就為大家?guī)硪黄褂胘query提交form表單并自定義action的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
一個酷炫的圖片翻滾效果要實現(xiàn)這個效果并不難，只要思路對了，一切都好辦，下面有個不錯的示例，大家可以參考下2014-03-03
下面小編就為大家?guī)硪黄猨query 判斷是否支持Placeholder屬性的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
本篇文章主要是對JQuery+Ajax無刷新分頁的實例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要介紹了基于jQuery實現(xiàn)左右圖片輪播，實現(xiàn)原理通用可通用，希望能和大家分享一下思路，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了jquery可定制的在線UEditor編輯器，UEditor的功能非常強大，ueditor更具有功能插件接口，很輕松地添加自己定義功能到編輯器中，方便項目的不同需求，需要的朋友可以參考下2015-11-11
jquery動態(tài)導航插件dynamicNav用法實例分析
這篇文章主要介紹了jquery動態(tài)導航插件dynamicNav用法,較為詳細的分析了jquery導航插件的原理及具體使用方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
在DOM對象的實踐操作中,存在用于綁定事件的bind方法,也會有相應的移除綁定事件unbind方法，接下來將介紹unbind方法的使用，感興趣的朋友可以不要錯過了啊，或許本文對你有所幫助2013-02-02
這篇文章主要介紹了jQuery實現(xiàn)的鼠標響應緩沖動畫效果,涉及jQuery事件響應、數(shù)值運算及頁面元素動態(tài)操作相關技巧,需要的朋友可以參考下2018-02-02
關于event.cancelBubble和event.stopPropagation()的區(qū)別介紹
cancelBubble用于ie的阻止冒泡事件，event.stopPropagation（）用于firefox和chrome等其他瀏覽器的疑惑介紹。2011-12-12