html结构如下:
<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="用户名:"/>
<span class="hide xz-placeholder">用户名:</span>
<img class="xz-info-wrong" src="images/wrong.png" alt="错误标志"/>
</div>
<div class="xz-password">
<input class="xz-inputPwd" id="password" type="password" required="required" placeholder="密码:"/>
<span class="hide xz-placeholder">密码:</span>
<img class="xz-info-wrong" src="images/wrong.png" alt="错误标志"/>
</div>
<div class="xz-verification">
<input class="xz-inputVerification" id="verification" required="required" placeholder="验证码:"/>
<span class="hide xz-placeholder">验证码:</span>
<img class="img-verification" src="images/getimg.jpg" alt="验证码图片"/>
<img class="xz-info-wrong" src="images/wrong.png" style="right: 170px" alt="错误标志"/>
<div class="clear"></div>
</div>
<div class="xz-btn-login">
<a id="xz-btn" href="javascript:void(0)" class="disabled">登录</a>
</div>
</form>
js代码如下:
//检测是否是Ie浏览器
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;
}
}
//解决ie不支持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();
}
}
}