<!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>