JQuery implements HTML5 placeholder effect instances

You must be aware of the new placeholder attribute in HTML5? It's ok if you don't know. Input box has default text is, often need such an effect, click to make the default text disappear, lose focus after the default text display.

Today I'm going to share some jQuery code to simulate placeholder effects.

Javascript code:

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 code:

<input type="text" value=" Search here " class="pInputText" />

Some people may ask, since html5 provides such functions, and js write why?