Solution to compatibility problem of IE placeholder attribute

HTML 5 has a great attribute, placeholder, when the mouse is focused on it, the hint text disappears, and after losing focus, it appears again:

However, in browsers that do not support HTML5, the placeholder attribute is invalid, and in order to solve this problem, the placeholder attribute is artificially implemented:

The

Code is as follows:
The//placeholder feature implements
var placeholder = {
Add:function (EL) {
if (! Placeholder ' in document.createelement (' input ')) {
var self = placeholder;
El.each (function (e) {
if (isempty (E.value ()) | | E.value () = = e.attr (' placeholder ')) {
E.value e.attr (' placeholder ');
e.css (' Color ', ' gray ');
}
Else {
e.css (' Color ', ' black ');
}
});
El.bind (' Focus ', self._onfocus);
El.bind (' click ', Self._onfocus);
El.bind (' Blur ', Self._onblur);
El.bind (' KeyUp ', self._onkeyup);
}
},
Remove:function (EL) {
if (! Placeholder ' in document.createelement (' input ')} {
var self = placeholder;
El.unbind (' Focus ', self._onfocus); br> el.unbind (' click ', Self._onfocus);
El.unbind (' Blur ', Self._onblur);
}
},
Check:function (EL) {
if (! Placeholder ' in document.createelement (' input ')) {
El.each (function (tar) {
if (IsEmpty (Tar.value ())) {
Tar . Value (tar.attr (' placeholder '));
}
});
}
},
Clear:function () {
if (! Placeholder ' in document.createelement (' Input '))} {
$ (' input[type= ' text '] '). Each (function (EL) {
if (el.value) ( = = = El.attr (' placeholder ')) {
El.value (');
}
});
$ (' textarea '). Each (function (EL) {
if (el.value () = = el.attr (' placeholder ')) {
El.value (');
}
});
}
},
_onfocus:function () {
if (this). Value () = $ (this). attr (' placeholder '))
$ ('). br>},
_onblur:function () {
If IsEmpty ($ (this). Value ()) | | $ (this). Value () = $ (this). attr (' placeholder ')) {
$ (this). Value ($ (this). attr (' placeholder '));
$ (this). CSS (' color ', ' gray ');
}
Else {
$ (this). CSS (' color ', ' black ');
}
},
_onkeyup:function () {
if (IsEmpty) ($ (this). Value ()) {
$ (this). CSS (' color ', ' gray ');
}
Else {
$ (this). CSS (' color ', ' black ');
}
}
;

Use time:

The code is as follows:
Placeholder.add ($ (' input[type= "text"]);
Placeholder.add ($ (' textarea '));

It should be noted that, given that if the type of input is password, placeholder shows .... The properties

In this case, the workaround is:

Given two input boxes,

One is text, one is password,

When there is focus, switch to password, lose focus, switch to text to show the placeholder attribute.

The code is as follows:
<script type= "Text/javascript" src= "Jquery-1.7.2.js" ></script>
<script type= "Text/javascript" >
$ (function () {
var pwd = $ ("#pwd");
var password = $ ("#password");
Pwd.focus (function () {
Pwd.hide ();
Password.show (). focus ();
});
Password.focusout (function () {
if (Password.val (). Trim () = = "") {
Password.hide ();
Pwd.show ();
}
});
});
</script>
<input type= "text" id= "pwd" value= "Please enter password"/>
<input type= "password" id= "password" style= "Display:none"; />