建站经验技巧怎样让密码框中的密码点“显示”后可见

怎样让密码框中的密码点“显示”后可见

一般输入用于密码的表单type值为password,它的特点是在框内输入密码的时候,会显示为小圆点,也有的网站提供了一个密码可见的功能,点击后用户输入的密码就不会被隐藏,如下图:

密码框密码可见.png

第一个密码框,输入密码的时候密码是可见的,第二个密码框默认隐藏了输入的密码,怎样实现点击右边的“显示”后显示输入的密码呢,主要实现原理是通过改变表单的type值,整体做法如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
body {margin:50px;}
input {border:1px solid #0066cc;margin:0;padding:5px;}
#passwd {cursor:pointer;}
</style>
</head>
<body>
<div>
请输入密码:<input id="show" type="password" maxlength="16">
<span id="passwd">显示</span>
<script>
passwd.onclick = function(){
  if(this.innerHTML == '显示'){
        this.innerHTML = '隐藏';
        show.type="text";
  }else{
        this.innerHTML = '显示';
        show.type="password";
  }
}    
</script>
</div>
</body>
</html>

这里通过js将文本框的type更改,即实现了让密码可见的效果。很多网站是采用一个小眼睛的图片,点击切换显示密码,实现方法都是一样的:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
body {margin:50px;}
input {border:1px solid #0066cc;margin:0;padding:5px;}
#passwd {cursor:pointer;}
#eye {vertical-align:middle;}
</style>
</head>
<body>
<div>
请输入密码:<input id="show" type="password" maxlength="16">
<span id="passwd"><img id="eye" onclick="hideShowPsw()" alt="显示密码" src="eye1.png" /></span>
<script>  
 var eye = document.getElementById("eye");  
 var show = document.getElementById("show");  
    function hideShowPsw(){  
        if (show.type == "password") {  
            show.type = "text";  
            eye.src = "eye2.png";  
        }else {  
            show.type = "password";  
            eye.src = "eye1.png";  
        }  
    }  
</script>  
</div>
</body>
</html>

只需准备两张小眼睛的图标就行了(彩色和黑白,或者闭上眼睛睁着眼睛的,更真实):

小眼睛图标显示密码.png

在IE10浏览器中,遇到密码输入框的时候,框内会自行显示一个小眼睛的图标,点击后也能显示密码,如果是普通文本输入框,则IE10会自动显示一个小叉,点击后可以清空文本框已输入的内容,如果不想要IE10自带的这两个功能生效,可以在网页CSS里加入:

input::-ms-clear {display:none;}
input::-ms-reveal {display:none;}

这两个针对IE浏览器的CSS定义便可去掉IE浏览器自动显示的文本清除和显示密码的功能…

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/website/81.html