登录页面
<div class="m_login_main">
<h2>用户登录</h2>
<dl>
<dd>
<em class="username"><span></span></em>
<input id="userAccount" type="text" placeholder="账号" class="m_username" name="userAccount">
</dd>
<dd>
<em class="password"><span></span></em>
<input id="userPassword" type="password" placeholder="密码" class="m_password" name="userPassword">
</dd>
<dd>
<input id="verification" type="text" placeholder="验证码" class="m_username" name="verification" style="width: 158px;border-left: 1px solid #e5e4e7;">
<a href="javascript:veilCode();" class="sx">
<img id="authcode" src="authcode.jsp" alt="" class="pngfix" style="height: 42px; width: 100px;vertical-align: top;"/>
</a>
</dd>
<div style="text-align:center;height:5px;">
<em id="message" style="color:red;text-align: center;" ></em>
</div>
<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
<dt>
<input type="button" class="layui-btn layui-btn-normal" οnclick="login()" value="登录" data-method="offset" data-type="auto">
</dt>
</div>
</tr>
</dl>
</div>
登录input中有placeholder属性,但是在ie9中不支持placeholder属性,于是用js模拟placeholder
<script type="text/javascript">
//ie9以下placeholder属性bug修改
$(function(){
if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder 不支持则执行一下自定义代码
$('[placeholder]').focus(function() {
var input = $(this);
//判断如果你密码框,获取焦点之后属性修改为密码框 如果没有密码框此处判断可以删除 一下同理
if(input[0].id=='userPassword'){
input.prop('type','password');
}
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
//将所有input置为文本框 主要为了重置密码框
input.prop('type','text');
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}else{
//密码框填写密码后 密码后恢复 密码框
if(input[0].id=='userPassword'){
input.prop('type','password');
}
}
}).blur();
};
})
//判断placeholder属性是否可以使用的方法
function placeholderSupport() {
return 'placeholder' in document.createElement('input');
}
</script>