Placeholder compatible JS code in HTML5

In doing the project, especially for login, registration of some important tips, are generally using the placeholder attribute, you can realize the input when the message disappears, lost focus after the message display, but this attribute is not compatible;

The following code can attempt to use jquery to complete a placeholder.

Note: The Password box needs to be handled separately, and the text style in the input box may require additional modification.

You can improve on the basis of this code to achieve the results you need.

$ (function () {
If placeholder is not supported, use jquery to complete
if (!issupportplaceholder ()) {
Traverse all input objects except the password box
$ (' input '). Not ("input[type= ' password ')").
function () {
var self = $ (this);
var val = self.attr ("placeholder");
Input (self, Val);
}
);

/* Special handling of the password box
* 1. Create a text box
* 2. Toggle when getting focus and losing focus
*/
$ (' input[type= "password"]). each (
function () {
var Pwdfield = $ (this);
var pwdval = pwdfield.attr (' placeholder ');
var pwdid = pwdfield.attr (' id ');
The ID for renaming this input is the original ID followed by 1
Pwdfield.after (' <input style= "background:transparent;_border:0;height:32px;line-height:32px;" id= "' + pwdId + ' 1" Type= "text" value= ' +pwdval+ ' autocomplete= ' off '/> ');
var Pwdplaceholder = $ ('. ' + Pwdid + ' 1 ');
Pwdplaceholder.show ();
Pwdfield.hide ();

Pwdplaceholder.focus (function () {
Pwdplaceholder.hide ();
Pwdfield.show ();
Pwdfield.focus ();
});

Pwdfield.blur (function () {
if (pwdfield.val () = = "") {
Pwdplaceholder.show ();
Pwdfield.hide ();
}
});
}
);
}
});

To determine whether the browser supports placeholder properties
function Issupportplaceholder () {
var input = document.createelement (' input ');
Return ' placeholder ' in input;
}

Processing of jquery Replacement placeholder
function input (obj, Val) {
var $input = obj;
var val = val;
$input. attr ({value:val});
$input. focus (function () {
if ($input. val () = val) {
$ (this). attr ({value: ""});
}
}). blur (function () {
if ($input. val () = "") {
$ (this). attr ({value:val});
}
});
}