JQuery implements HTML5 placeholder effect instance, html5placeholder

JQuery implements HTML5 placeholder effect instance, html5placeholder

Do you know the placeholder attribute added to HTML5? It doesn't matter if you don't know. The default text in the input box is. This effect is often required. Click to make the default text disappear, and the default text is displayed after the focus is lost.

Today I will share a piece of jQuery code to simulate the placeholder effect.

Javascript code:

Copy codeThe Code is 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(selfdatavalue0000.css ("color", "# A9A9A9 "))))
} Else {
Return false;
}
}
$ (". PInputText"). on ("click blur", placeHolder );

Html code:

Copy codeThe Code is as follows:
<Input type = "text" value = "search for" class = "pInputText"/>

Some may ask, since html5 provides such a function, why is there js writing?

This is not nonsense. Of course, it is about compatibility. If IE is better compatible with HTML5, who would like to use js to implement this.