"JQuery" makes IE's input box complete placeholder's mission

If you add the placeholder= "xx" attribute to the input box, for example:

<input type= "text" placeholder= "Please enter keywords"/>

You can implement the function of replacing text in the input boxes of advanced browsers such as Google Chrome, which is to get the dialog box as shown:

But this property is not compatible in WIN7 default browser IE8, let's not say IE6. In other words, IE does not support placeholder this tag.

If you don't believe it, you can pull this piece of code into the IE8 and try it, you're just getting an empty dialog box.

In IE, in order to achieve this to use the component loses focus blur and get focus inside to do, in detail can refer to the "JavaScript" Component focus and page anchor points between the value "(Click Open link)

In fact, you can not use jquery at all, this is to review the "jquery" Control node, only in the foreground through the Get method to complete the parameter transfer (click to open the link)

The idea is simple, at first this text box defaults to #cccccc gray font, the value is "Please enter a keyword", when the focus, set its color to #000000 black, the value is empty, once it loses focus, if the value is empty, immediately restore it to the default #cccccc gray font, the value is " Please enter the keyword "

The code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">Note here is that it is to add a Boolean value of Isthisnull to determine whether it is empty, in order to determine whether the user should enter "Please enter a keyword",
Can not think of the text box inside the "Please enter a keyword" is empty, if the user input "Please enter keywords"?
You should not use jquery or JavaScript to determine whether a color or style value is "#cccccc" or "Color: #cccccc" Because the color is taken by the $ (this). CSS ("color"). In the browser output is not the same as the result, and take the style, IE will think that this is an object, rather than a string
Set up a isthisnull, or you can prepare for further forms validation later
Finally, the following effects are obtained in IE:


"JQuery" makes IE's input box complete placeholder's mission