jquery implementation HTML5 Placeholder effect example _jquery

You must know HTML5 's new placeholder attribute, right? It doesn't matter if you don't know. The input box has the default text is, often need such an effect, click let the default text disappear, lose focus and let the default text display.

Share a piece of jquery code today, simulating placeholder effects.

JavaScript code:

Copy Code code as follows:

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:

Copy Code code as follows:

<input type= "text" value= "Search Here" class= "Pinputtext"/>

Some people may ask, since HTML5 provide such a function, there are JS write why?

This is not nonsense, of course, the compatibility of the problem, ie if the HTML5 compatible with a better word, who would like to use JS to achieve this thing ah.