javaScript实现密码框内容的显示、隐藏

主页 M

javaScript实现密码框内容的显示、隐藏

2023-05-29 网页编程网 网页编程网

1.原理

用户点击，js实现密码框的显示与隐藏，防减少前端的密码确认。

主要技术有：div显示的input的最右端。定义了flag=false的变量，当用户点击时，使!flag，即flag=true，进行判断，true时密码显示，反之false时密码隐藏。

2.代码实现1

3.代码实现2

<style>
body{
margin:0px; 
background-color:white; 
font-family:'PT Sans', Helvetica, Arial, sans-serif; 
text-align:center; 
color: #A6A6A6; 
}
/*输入框样式，去掉背景阴影模仿原生应用的输入框*/
input{
width:100%; 
height:50px; 
border:none; 
padding-left:3px; 
font-size:18px; 
}
input:focus { 
outline:none; 
}
/*显示\隐藏密码图片*/
img{
width:40px;
height:25px;
position:absolute; 
right:0px; 
margin:15px; 
}
/*登录按钮*/
#aButton{ 
width:200px; 
height:50px; 
margin-top:25px; 
background:#1E90FF; 
border-radius:10px; 
border:none;
font-size:18px;
font-weight:700; 
color: #fff;
}
#aButton:hover{
background:#79A84B; 
outline:0;
}
/*输入框底部半透明横线*/
.input_block {
border-bottom:1px solid rgba(0,0,0,.1);
}
/*container*/
#page_container{
margin:50px;
}
</style>
<body>
<div id="page_container">

<div class="input_block">
<img id="demo_img" onclick="hideShowPsw()" src="visible.png">
<input type="password" id="demo_input" placeholder="Password"/>
</div>
<button id="aButton" onclick="">Login</button>
</div>

<script>
var demoImg = document.getElementById("demo_img")
var demoInput = document.getElementById("demo_input")
//隐藏text block，显示password block
function hideShowPsw(){
if (demoInput.type == "password"){
demoInput.type = "text"
demo_img.src = "invisible.png"
}else{
demoInput.type = "password"
demo_img.src = "visible.png"
}
}
</script>
</body>

阅读原文

阅读 1695

123 显示电脑版