The HTML structure is as follows:
<form action= "POST" class= "Xz-form" id= "Xz-form" >
<div id= "Validate" class= "Xz-validate-tip" ></div>
<div class= "Xz-username" >
<input class= "Xz-inputname" id= "UserName" type= "text" required= "required" placeholder= "User name:"/>
<span class= "Hide Xz-placeholder" > user name:</span>
</div>
<div class= "Xz-password" >
<input class= "xz-inputpwd" id= "password" type= "password" required= "required" placeholder= "Password:"/>
<span class= "Hide Xz-placeholder" > Password:</span>
</div>
<div class= "Xz-verification" >
<input class= "xz-inputverification" id= "verification" required= "required" placeholder= "Verification Code:"/>
<span class= "Hide Xz-placeholder" > Verification Code:</span>
<div class= "Clear" ></div>
</div>
<div class= "Xz-btn-login" >
<a id= "xz-btn" href= "javascript:void (0)" class= "disabled" > Login </a>
</div>
</form>
The JS code is as follows:
Detect if it is IE browser
function Isie () {//ie?
var browser=navigator.appname
var b_version=navigator.appversion
var version=b_version.split (";");
var trim_version=version[1].replace (/[]/g, "");
if (browser== "Microsoft Internet Explorer" && trim_version== "MSIE7.0")
{
return true;
}else if (browser== "Microsoft Internet Explorer" && trim_version== "MSIE8.0") {
return true;
}else if (browser== "Microsoft Internet Explorer" && trim_version== "MSIE9.0") {
return true;
} else {
return false;
}
}
Solve IE does not support placeholder
$ (' #xz-form span.xz-placeholder '). each (function () {
if (Isie ()) {
var $this = $ (this);
if (! $this. Prev (). val () | | $this. PREV (). val () = = "") {
$this. Show ();
}
}
})
$ (' #xz-form span.xz-placeholder '). Bind ("click", Function () {
if (Isie ()) {
$ (this). Hide ();
$ (this). Prev (). focus ();
}
})
$ (' #xz-form input '). Bind ({
Focus:focus,
Blur:blur
})
function focus () {
if (Isie ()) {
var $this = $ (this);
$this. Next (). Hide ();
}
}
function blur () {
if (Isie ()) {
var $this = $ (this);
if ($this. val () = = "") {
$this. Next (). Show ();
}
}
}
IE9 the following browsers are incompatible with placeholder solutions