首頁 > web前端 > js教程 > jQuery實作HTML5 placeholder效果實例_jquery

jQuery實作HTML5 placeholder效果實例_jquery

WBOY
發布: 2016-05-16 16:27:59
原創
1648 人瀏覽過

你一定知道 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代碼:

複製程式碼 程式碼如下:


可能有人會問了,既然html5都提供這樣的功能,還有js寫幹嘛?

這不是廢話嗎,當然是以為相容問題,IE要是對HTML5相容好點的話,谁愿意用js去實現這玩意兒啊。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板