jQuery實(shí)現(xiàn)HTML5placeholder效果實(shí)例_jquery

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:29:51

jQuery實(shí)現(xiàn)HTML5placeholder效果實(shí)例_jquery

jQuery實(shí)現(xiàn)HTML5placeholder效果實(shí)例_jquery:你一定知道 HTML5新增的 placeholder 屬性吧？不知道的也沒關(guān)系。輸入框有默認(rèn)文本是，常需要這樣一個(gè)效果，點(diǎn)擊讓默認(rèn)文本消失，失去焦點(diǎn)后讓默認(rèn)文本顯示。今天分享一段jQuery代碼，模擬 placeholder 效果。 Javascript代碼：代碼如下: fu

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀jQuery實(shí)現(xiàn)HTML5placeholder效果實(shí)例_jquery:你一定知道 HTML5新增的 placeholder 屬性吧？不知道的也沒關(guān)系。輸入框有默認(rèn)文本是，常需要這樣一個(gè)效果，點(diǎn)擊讓默認(rèn)文本消失，失去焦點(diǎn)后讓默認(rèn)文本顯示。今天分享一段jQuery代碼，模擬 placeholder 效果。 Javascript代碼：代碼如下: fu

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

今天分享一段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代碼：

代碼如下:

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

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com