点击密码框明文和密文显示切换

快乐打工仔 分类:实例代码

不少应用,为了人性化效果,可以点击一个复选框之类的控件实现密码框文明和密文切换效果。

可以让用户明确的知道输入密码是否正确,同时也可以保密的效果。

下面就通过代码实例介绍一下如何实现此功能。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#ck").click(function(){
    if($(this).prop("checked")){
      $("#pw").prop("type","text");
    }
    else{
      $("#pw").prop("type","password");
    }
  })
})
</script>
</head>
<body>
<input type="password" id="pw"/>
<input type="checkbox" id="ck"/>
</body>
</html>

一.实现原理:

默认状态下是密文状态,input控件的type属性值是password,当选中复选框的时候,将input的type属性值修改text,这样就可以实现明文显示了,反之亦然。

二.相关阅读:

(1).prop()参阅jQuery prop()一章节。

(2).click事件参阅jQuery click事件一章节。

点击密码框明文和密文显示切换,这样的场景在实际项目中还是用的比较多的,关于点击密码框明文和密文显示切换就介绍到这了。

点击密码框明文和密文显示切换属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容