登录时⽂本框和密码框之间的切换
实现效果：默认情况下，输⼊的密码的input框显⽰“密码”提⽰，点击的时候，成为正常的密码框进⾏加密。
在⽕狐⾥⾯通过修改input标签的type属性轻松实现该效果，但IE另类啊，死活报错。另外，JQuery出于安全性的考虑，也不让这么⼲。
1、HTML代码：
<body οnkeydοwn="if (event.keyCode==13) {checkLogin();return false;}" >
<div class="login-div">
<form name="loginForm" id="loginForm" method="post" action="">
<h1 class="tit">标题</h1><!--标题-->
<p id="logintitle">${appError}</p><br /><!--错误提⽰-->
<div class="inp"><input type="text" value="⽤户名"  class="infoInput" name="userName" maxlength="2
0" id="userName" οnfοcus="inputFocus(this);" οnblu            <div class="inp">
<input type="password" value="密码" class="infoInput2" name="password" maxlength="20" id="password" οnfοcus="inputFocus(this);" οnblur="inputBlur(this);"    <input type="text" value="密码" class="infoInput2" name="pwd" maxlength="20" id="pwd" οnfοcus="inputFocus(this);" οnblur="inputBlur(this);"/>
</div>
<div class="inp2"><input type="button" class="buttonface" value="登录平台" onClick="checkLogin()" name="button" /></div>
</form>
</div>
</body>
2、JS代码（记得导⼊Jquery所需要的JS⽂件）：
<script type="text/javascript">
//登陆页始终显⽰在最外层
if(self!=top){
top.location=self.location;
}
$(document).ready(function() {
$("#userName").attr("tabIndex","1");
im($("#logintitle").html())==""){
$("#logintitle").html("请输⼊⽤户名和密码");
}
});
function checkLogin() {
var name = im($("#userName").val());
var pwd = im($("#password").val());
if (name == '' || pwd == '') {
$("#logintitle").empty().append("⽤户名密码不能为空");
}else if(name == "⽤户名" || pwd == '密码'){
$("#logintitle").empty().append("⽤户名或密码不存在");
} else {
$("#userName").im($("#userName").val()));
$("#password").im($("#password").val()));
$("#loginForm").submit();
}
}
function inputFocus(obj){
var id = $(obj).attr("id");
var val = im($("#"+id).val());
if(id=="userName"){
if(val=="⽤户名"){//没有输⼊值，那么聚焦时为空
$("#"+id).val("");
}
}
if(id=="pwd"){//⽂本框
if(id=="pwd"){//⽂本框
/
/ElementById("password").type="password";⽕狐可⽤  //说明开始聚焦到text的密码框，此时需要替换成password的密码框
$("#"+id).css("display","none");//⽂本框隐藏
id="password";
$("#"+id).css("display","inline");//密码框显⽰
$("#"+id).focus();
im($("#"+id).val());
if(val=="密码"){//没有输⼊值，那么聚焦时为空
$("#"+id).val("");
}
}
}
function inputBlur(obj){
var id = $(obj).attr("id");
var val = im($("#"+id).val());
if(id=="userName"){
if(val==""){//没有输⼊值，那么离开时依旧显⽰“⽤户名”
$("#"+id).val("⽤户名");
}
}
if(id=="password"){//密码框
if(val==""){//没有输⼊值，那么离开时依旧显⽰“密码”
$("#"+id).css("display","none");//密码框隐藏
id="pwd";
$("#"+id).css("display","inline");//⽂本框显⽰
$("#"+id).val("密码");
input框禁止输入//ElementById(id).type="text";⽕狐可⽤
}
}
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。