`

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

    博客分类:
  • JS
 
阅读更多

实现效果:默认情况下,输入的密码的input框显示“密码”提示,点击的时候,成为正常的密码框进行加密。

在火狐里面通过修改input标签的type属性轻松实现该效果,但IE另类啊,死活报错。另外,JQuery出于安全性的考虑,也不让这么干。

1、HTML代码:

<body onkeydown="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" onfocus="inputFocus(this);" onblur="inputBlur(this);"/></div>
            <div class="inp">
			<input type="password" value="密码" class="infoInput2" name="password" maxlength="20" id="password" onfocus="inputFocus(this);" onblur="inputBlur(this);" style="display:none;" />
			<input type="text" value="密码" class="infoInput2" name="pwd" maxlength="20" id="pwd" onfocus="inputFocus(this);" onblur="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>

 

 

分享到:
评论

相关推荐

    好看的文本框和按钮样式

    当文本框获得焦点时,边框颜色会在红色(#ff0000)和金黄色(#ffee00)之间快速切换,增强了视觉冲击力。`ryo:expression`属性虽然在某些情况下被视为非标准用法,但在IE浏览器中可以实现动态效果。`onfocus`和`...

    HTML的文本框效果

    - **解析**:这段代码使用CSS表达式实现了类似的效果,当文本框获得焦点时,其边框颜色会在"#ffee00"和"#ff0000"之间切换。 ### 三、其他文本框效果 #### 3.1 文本框宽度自适应 - **示例**: ```html (this....

    pyside6实现注册登录主页面跳转框架

    在PySide6中,我们可以使用`QtWidgets`模块创建各种窗口部件,如`QLineEdit`(文本框)用于输入用户名和密码,`QPushButton`(按钮)用于触发登录操作。登录功能通常会涉及到事件处理,例如当用户点击登录按钮时,会...

    jquery 实现密码框的显示与隐藏示例代码

    此时,我们将`passwd`密码框的值赋给`passwd2`文本框,并通过`$("#passwd").hide()`和`$("#passwd2").show()`分别隐藏密码框并显示文本框。 2. 如果复选框未被选中,我们恢复默认状态,即隐藏文本框,显示密码框,并...

    VB编写的模拟QQ登陆程序

    - **读取用户输入**:获取文本框和密码框中的值。 - **校验数据**:检查输入的用户名和密码是否符合格式要求,如长度限制、特殊字符等。 - **与服务器通信**:实际的QQ登录需要向腾讯服务器发送请求,验证用户身份。...

    从零开始学JAVA第16章_Swing常用控件.ppt

    Swing提供了多种控件,如文本框、密码框、多行文本框、复选框、单选按钮和选项卡,它们各自有特定的功能和应用场景。 首先,我们来看文本框。`JTextField`是用于创建单行文本输入的控件,用户可以在其中输入文本。...

    VB选择按钮与组合框实现选课与登录

    通过以上讲解,我们可以看到VB选择按钮和组合框在实现选课与登录功能时,不仅提供了用户交互,还涉及了数据库操作、事件处理和界面设计等多个方面的知识点。在实际项目中,开发者需要综合运用这些知识来构建一个完整...

    GUI登陆窗口

    我们还使用 GUI.PasswordField() 方法创建一个密码框,以便用户输入密码,并将其设置在屏幕的 (130,50) 位置上。 在 Start() 方法中,我们将预设的帐号和密码赋值给 name 和 password 变量。在这个示例中,我们将...

    JavaSwing+mysql 登录页面

    多页面通信可能涉及到使用CardLayout布局管理器在不同的JPanel之间切换,或者使用内部框架(JInternalFrame)在单个窗口内展示多个独立的界面。 总之,"JavaSwing+mysql 登录页面"是一个结合了桌面UI设计和数据库...

    C#窗体登录例子 互换窗体

    登录窗体通常包含两个文本框(分别用于用户名和密码)、一个登录按钮和可能的一个“记住我”复选框。 3. **事件处理**:C#中的事件驱动编程是关键。例如,我们为登录按钮的`Click`事件编写事件处理程序,检查输入的...

    Excel VBA实用技巧大全 附书源码

    03023判断工作表被保护时是否启用数据透视表控件和操作 03024判断工作表被保护时是否可以选定单元格 03025重命名工作表 03026重命名新建的工作表 03027改变工作表标签颜色 03028设置工作表的显示状态 03029设置工作...

    QT实现注册登录,添加背景图片,界面跳转源码

    7. **界面跳转**:QT提供了多个窗口之间切换或隐藏/显示窗口的方式来实现界面跳转。可以使用`show()`和`hide()`函数,或者利用`QStackedWidget`来实现平滑的页面切换效果。 8. **事件处理**:在QT中,每个用户交互...

    功能测试检查点.docx

    - 密码框显示是不是加密显示 - 错误登录的次数是否有限制 - 是否有超时的限制,也就是说,用户登录后在一定时间内(例如15分钟)没有点击任何页面,是否需要重新登录才能正常使用 - 检查cookie或者其他技术保留登录...

    方向键盘控制table内的input标签焦点

    为了让用户能够使用键盘在这些输入框之间切换焦点,我们需要利用JavaScript,尤其是像jQuery这样的库,它提供了方便的DOM操作和事件处理。 jQuery库简化了JavaScript的许多复杂操作,例如选择DOM元素、添加事件监听...

    04VBA在EXCEL中的应用(窗体,控件).pdf

    2. 可以通过编写VBA代码实现Excel单元格数据与列表框之间的数据交换。 文中描述的示例代码展示了如何改变窗体背景色和如何响应控件的点击事件。通过这些示例,用户可以了解如何在VBA中编写窗体和控件的基本事件代码...

    计算机二级Access第四章同步练习题.pdf

    16. 要在文本框中输入文本时达到密码显示效果,应设置“输入掩码”属性(C)。 17. 窗体Caption属性用于设置窗体的标题(A)。 18. 改变文本框控件的输出内容,应设置“控件来源”属性(C)。 19. 设置控件...

    C#z做的QQ界面

    每个窗体都可以通过Visual Studio的拖放工具来设计,包括添加文本框(TextBox)用于输入用户名和密码,按钮(Button)用于触发操作,以及标签(Label)显示提示信息等。 2. **事件处理** - C#中的事件处理机制使得...

    第一次 中文Windows XP 操作系统PPT学习教案.pptx

    - **对话框组成**:包含命令按钮、单选按钮、复选框、文本框、列表框、下拉列表框、滑杆、选项卡和标签等,用于交互式操作。 6. **图标** - **图标操作**:单击选中,按Ctrl+单击进行多选,按Shift+单击选择连续...

    聊天软件及其服务器.zip

    同时,可以使用QSettings类来存储用户配置和登录状态,以便于下次启动软件时自动加载。 多平台服务切换是指聊天软件能够在不同操作系统之间保持一致的用户体验。Qt5的跨平台兼容性使得开发者只需要编写一次代码,就...

    VS2008常用控件 自学者用起来很好

    5. **ComboBox** 和 **DropDownList** 控件:下拉框用于在文本框和下拉列表之间切换。ComboBox允许用户输入或从列表中选择,而DropDownList只允许选择。`Items`集合存储列表项,`SelectedIndex`或`SelectedItem`获取...

Global site tag (gtag.js) - Google Analytics