jQuery實現HTML5 placeholder效果執行個體_jquery

你一定知道 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去實現這玩意兒啊。