<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>中宏网络商学院-用户登录</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
</head>
<script type="text/javascript">
//判断浏览器是否支持 placeholder属性
function isPlaceholder() {
var input = document.createElement('input');
return 'placeholder' in input;
}
$(document).ready(function () {
if (!isPlaceholder()) { //不支持placeholder 用jquery来完成
var loginAccount = document.getElementById('LoginAccount').getAttributeNode('placeholder').nodeValue;
var LoginPassword = document.getElementById('LoginPassword').getAttributeNode('placeholder').nodeValue;
var style = document.getElementById('LoginPassword').getAttributeNode('class').nodeValue;
$("input[id='LoginAccount']").each(//把input绑定事件 排除password框
function () {
if ($(this).val() == "" && loginAccount != "") {
$(this).val(loginAccount);
$(this).focus(function () {
if ($(this).val() == loginAccount) $(this).val("");
});
$(this).blur(function () {
if ($(this).val() == "") $(this).val(loginAccount);
});
}
});
//对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
var pwdField = $("input[type=password]");
var pwdVal = LoginPassword;
pwdField.after('<input id="pwdPlaceholder" type="text" value=' + pwdVal + ' autocomplete="off" class="' + style + '" tabindex = "2" />');
var pwdPlaceholder = $('#pwdPlaceholder');
pwdPlaceholder.show();
pwdField.hide();
pwdPlaceholder.focus(function () {
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
});
pwdField.blur(function () {
if (pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
});
if (document.getElementById('LoginValCode') != null) {
var LoginValCode = document.getElementById('LoginValCode').getAttributeNode('placeholder').nodeValue;
var style = document.getElementById('LoginValCode').getAttributeNode('class').nodeValue;
$("input[id='LoginValCode']").each(//把input绑定事件 排除password框
function () {
if ($(this).val() == "" && LoginValCode != "") {
$(this).val(LoginValCode);
$(this).focus(function () {
if ($(this).val() == LoginValCode) $(this).val("");
});
$(this).blur(function () {
if ($(this).val() == "") $(this).val(LoginValCode);
});
}
});
}
}
});
</script>
<body>
<div class="wrap-full">
<div class="block-box block-box-1 mt-45">
<div class="block-body">
<div class="block-cont">
<div class="block-tit rel"><span class="ico abs"></span>用户登录</div>
<div class="clear">
<div class="w-4 mtb100 br fl">
<ul class="list-login">
<li><span class="ico ico-1"></span> <input type="text" class="ipt" id="LoginAccount" placeholder="请输入身份证号码"></li>
<li><span class="ico ico-2"></span> <input type="password" class="ipt" id="LoginPassword" placeholder="请输入密码"></li>
<li class="clear"><span class="ico ico-3"></span> <input type="text" class="ipt ipt-s fl" id="LoginValCode" placeholder="请输入验证码"><span class="code fr"><img src="images/code.jpg" alt=" "></span></li>
<li><button type="button" class="btn">立即登录</button></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
