网页编程网

www.youkud.com

当前位置：主页 >> 网页特效 >> 正文

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

阅读：2223 输入：2023-05-29 09:37:58

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>

上一篇：python3报错No module named setuptools.command.build
下一篇：CSS3电脑端、移动端自适应及媒体查询

相关阅读: 3种js+css实现移动设置底部固定菜单，极简方法; css3中grid实现键盘布局; css实现二行三列展示

下载专区: 软件下载（提取码：mtag）

Tag

HTML工具: 进制间转换; 进制转换（带小数）; html代码运行

HTML工具: 字母翻转; 硬盘整数分区; html颜色代码

HTML工具: 除空格回车; 万年历; fojiao

HTML工具: 小游戏; 在线绘画; 更多

手机版
联系微信:jingqishens