登录时文本框和密码框之间的切换

最新推荐文章于 2023-01-04 18:15:34 发布

wjiaoling136

最新推荐文章于 2023-01-04 18:15:34 发布

阅读量459

点赞数

分类专栏： JS 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/wjiaoling136/article/details/84515811

版权

JS 专栏收录该内容

58 篇文章 0 订阅

订阅专栏

实现效果：默认情况下，输入的密码的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="20" id="userName" οnfοcus="inputFocus(this);" οnblur="inputBlur(this);"/></div>
            <div class="inp">
			<input type="password" value="密码" class="infoInput2" name="password" maxlength="20" id="password" οnfοcus="inputFocus(this);" οnblur="inputBlur(this);" style="display:none;" />
			<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"); 
		if(jQuery.trim($("#logintitle").html())==""){
		$("#logintitle").html("请输入用户名和密码");
		}
	});	
		
	function checkLogin() {
		var name = jQuery.trim($("#userName").val());
		var pwd = jQuery.trim($("#password").val());
		if (name == '' || pwd == '') {
			$("#logintitle").empty().append("用户名密码不能为空");
		}else if(name == "用户名" || pwd == '密码'){
			$("#logintitle").empty().append("用户名或密码不存在");
		} else {
			$("#userName").val(jQuery.trim($("#userName").val()));
			$("#password").val(jQuery.trim($("#password").val()));
			$("#loginForm").submit();
		}
	}
	
	function inputFocus(obj){
		var id = $(obj).attr("id");
		var val = jQuery.trim($("#"+id).val());
		if(id=="userName"){
		    if(val=="用户名"){//没有输入值，那么聚焦时为空
			$("#"+id).val("");
		    }
		}

		if(id=="pwd"){//文本框
			//document.getElementById("password").type="password";火狐可用
			//说明开始聚焦到text的密码框，此时需要替换成password的密码框
			
			$("#"+id).css("display","none");//文本框隐藏
			id="password";
			$("#"+id).css("display","inline");//密码框显示
			$("#"+id).focus();
			val=jQuery.trim($("#"+id).val());
			
			if(val=="密码"){//没有输入值，那么聚焦时为空
				$("#"+id).val("");
			}
		}
	}
	function inputBlur(obj){
		var id = $(obj).attr("id");
		var val = jQuery.trim($("#"+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("密码");
				//document.getElementById(id).type="text";火狐可用
			}
		}
	}
</script>

wjiaoling136

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
登录时文本框和密码框之间的切换

实现效果：默认情况下，输入的密码的input框显示“密码”提示，点击的时候，成为正常的密码框进行加密。在火狐里面通过修改input标签的type属性轻松实现该效果，但IE另类啊，死活报错。另外，JQuery出于安全性的考虑，也不让这么干。1、HTML代码：&lt;body onkeydown="if (event.keyCode==13) {checkLogin();return ...
复制链接

扫一扫

专栏目录