jQuery實現(xiàn)HTML5 placeholder效果實例
更新時間：2014年12月09日 10:45:09 投稿：junjie
這篇文章主要介紹了jQuery實現(xiàn)HTML5 placeholder效果實例,本文目的主要是在需要兼容一些瀏覽器時使用,需要的朋友可以參考下
你一定知道 HTML5新增的 placeholder 屬性吧？不知道的也沒關(guā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" />
可能有人會問了，既然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標簽功能的方法
相關(guān)文章
通配符在控制input標簽時相當好用,這里簡單進行了jQuery中的通配符選擇器使用總結(jié),需要的朋友可以參考下2016-05-05
這篇文章主要介紹了jQuery實現(xiàn)向下滑出的平滑下拉菜單效果的方法,涉及jquery鼠標事件及頁面元素樣式的動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
jQuery 使用手冊，大家可以耐心的看完，就基本上入門了。2009-09-09
jQuery獲取table下某一行某一列的值實現(xiàn)代碼
這篇文章主要介紹了jQuery獲取table下某一行某一列的值實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04
下面小編就為大家?guī)硪黄狫Query解析XML數(shù)據(jù)的幾個簡單實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要為大家詳細介紹了jquery實現(xiàn)邊框特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
jQuery移動web開發(fā)之頁面跳轉(zhuǎn)和加載外部頁面的實現(xiàn)
這篇文章主要介紹了jQuery移動web開發(fā)之頁面跳轉(zhuǎn)和加載外部頁面的實現(xiàn),以changePage()和loadPage()方法的使用為主,需要的朋友可以參考下2015-12-12
用戶輸入一個表單，輸入準考證和驗證碼，驗證用戶是否輸入表單，點擊查詢提交，然后從服務(wù)器得到返回的數(shù)據(jù)并顯示出來2012-10-10
jQuery1.6 使用方法1，想要學(xué)習(xí)jquery的朋友可以參考下。2011-11-11
jQuery實現(xiàn)仿Alipay支付寶首頁全屏焦點圖切換特效
這篇文章主要介紹了jQuery實現(xiàn)仿Alipay支付寶首頁全屏焦點圖切換特效,涉及jQuery插件jquery.kinMaxShow的相關(guān)使用技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05