input密码框点击眼睛显示和隐藏

最新推荐文章于 2024-06-11 09:04:40 发布
最新推荐文章于 2024-06-11 09:04:40 发布
阅读量2.4w 收藏 16
点赞数 4
分类专栏： web前端技术 javascript 移动开发

俩张图片表示显示和隐藏，要是想改样式的话直接修改css就可以，根据自己样式来

很简单获取到相对应对密码框，

初始化是隐藏调用方法hideShowPsw进行判断，判断密码框的type == “password”是隐藏 变成type==“text”图片在变一下就好了 


<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/base.css" />
<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;    
}  
/*登录按钮*/  
button{    
   width: 200px;    
   height: 50px;    
   margin-top: 25px;    
   background: #1E90FF;    
   border-radius: 10px;    
   border:none;  
   font-size: 18px;  
   font-weight: 700;    
   color: #fff;  
}  
button:hover {  
background: #79A84B;    
outline: 0;  
}  
/*输入框底部半透明横线*/  
.input_block {  
   border-bottom: 1px solid rgba(0,0,0,.1);  
}  
/*container*/  
#page_container{  
   margin: 50px;  
}  
</style>
</head>
<body>
<!--<div id="page_container">-->  
   <!--暗文密码输入框-->  
   <!--<div class="input_block" id="psw_invisible">  
       <img id="visible" οnclick="showPsw()" src="img/hide.png">  
       <input type="password" id="input_invisible" placeholder="Password"/>  
   </div>  -->
   <!--明文密码输入框-->  
   <!--<div class="input_block" id="psw_visible" style="display: none;">  
       <img id="invisible" οnclick="hidePsw()" src="img/show.png">  
       <input type="text" id="input_visible" placeholder="Password"/>  
   </div>  
 
   <button οnclick="">Login</button>  
</div>  -->

<div id="page_container">  
   <!--密码输入框-->  
   <div class="input_block">  
       <img id="demo_img" οnclick="hideShowPsw()" src="img/hide.png">  
       <input type="password" id="demo_input" placeholder="Password"/>  
   </div>  
 
   <button οnclick="">Login</button>  
</div>  
</body>

<script type="text/javascript">  
   // 这里使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制  
//    var visible=document.getElementById('psw_visible');//text block  
//    var invisible=document.getElementById('psw_invisible');//password block  
//    var inputVisible = document.getElementById('input_visible');  
//    var inputInVisible = document.getElementById('input_invisible');  
   //隐藏text block，显示password block  
//    function showPsw(){  
//        var val = inputInVisible.value;//将password的值传给text  
//        inputVisible.value = val;  
//        invisible.style.display = "none";    
//        visible.style.display = "";    
//    }  
   //隐藏password，显示text    
//    function hidePsw(){  
//        var val=inputVisible.value;//将text的值传给password    
//        inputInVisible.value = val;   
//        invisible.style.display = "";    
//        visible.style.display = "none";    
//    }  


// 这里使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制  
   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 = "img/show.png";  
       }else {  
           demoInput.type = "password";  
           demo_img.src = "img/hide.png";  
       }  
   }  
   
   
</script>
</html>
前端小白鲨
关注
  • 4
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
input输入款点击小眼睛显示或隐藏密码
04-19
前端登录界面输入密码，input输入款点击小眼睛显示或隐藏密码。
JS实现密码框的显示密码和隐藏密码功能示例
10-20
JavaScript作为一种客户端脚本语言，可以在用户浏览器上直接运行，提供了动态操作页面元素的能力，包括密码框的显示和隐藏功能。这里我们将详细讨论如何使用JavaScript实现这个功能，以及涉及到的相关技巧。 首先，...
password 类型的 input 在右方会有一个 小眼睛
qiao
06-18 3747
input::-ms-clear{display:none;} input::-ms-reveal{display:none;}
关于element ui的登录输入框，使用记住浏览器记住密码功能后，覆盖了原本样式（背景色，文字颜色等）
最新发布
ZHUzhuzhu08的博客
06-11 186
【代码】关于element ui的登录输入框，使用记住浏览器记住密码功能后，覆盖了原本样式（背景色，文字颜色等）
密码眼睛 password 文字显示隐藏
林中明月间丶
05-13 2830
input密码输入框显示为“*” <script type="text/javascript"> // 这里使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制 var demoImg = document.getElementById("demo_img"); var demoInput = document.getElementById("demo_in...
隐藏input的三种方法和区别
热门推荐
那么多的人，你要去哪里
06-19 8万+
一、&lt;input type="hidden" /&gt;二、&lt;input type="text" style="display:none" /&gt;以上两种方法可以实现不留痕迹的隐藏。三、&lt;input type="text" style="visibility: hidden;" /&gt;第三种方法可以实现占位隐藏（会留下空白而不显示）..
input如何显示密码隐藏密码，点击小眼睛显示隐藏密码
m0_62709532的博客
03-31 7371
【代码】input如何显示密码隐藏密码，点击小眼睛显示隐藏密码。
js实现input密码框显示/隐藏功能
10-17
主要为大家详细介绍了js实现input密码框显示和隐藏功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
input关于密码输入框
csy_119的博客
10-08 1469
当我们设置input的类型为password 时。给一个 autocomplete="off" 还是会自动填充一些文本进去。 这个时候改成autocomplete="new-password"就不会自动填充了嘻嘻。 autocomplete="off" 当类型为其他的时候就不会再自动填充了，只是对password失效 ...
css 去掉 ie10，11 中 input [type=“password“] 中的眼睛图标
qq_45991812的博客
10-10 416
去掉vue中type=password自带的眼睛图案。
vue中input点击小眼睛显示和隐藏密码
xu5651的博客
01-06 5717
在登录页中经常有点击小眼睛显示和隐藏密码，就是切换输入框的type，原本是password，来回切换type！ div class="account"> <label class="input_span"> <span>密码</span> <input :type="typePwd" class="inpu...
使用a标签隐藏很丑陋的input[type=“file“]
AzeShinja的博客
07-12 278
博主使用的是vue3 + elementPlus 直接上代码和效果图 <el-dropdown split-button type="primary"> 上传文件 <template #dropdown> <el-dropdown-menu> <el-dropdown-item> <a style="
密码框后的小眼睛怎么写？
Wonder
08-04 8957
<div class="item" ng-init="pswShow = false"> <span> <input type="text" class="text inline-block" ng-model="oParams.szPassword" ng-if="pswShow"/> <input type="password" class="text inline-block" ng-model="oPara...
css去除input密码框默认小眼睛样式
weixin_44108880的博客
09-23 7771
最近在做项目中碰到的密码小眼睛边角溢出的问题，经多方研究找到了解决办法。 解决办法： 1.使用css代码去掉小眼睛样式，代码如下： input[type="password"]::-ms-reveal{ display:none } 2.使用新的切换密码框样式遮住小眼睛（需适当调整位置） 文章如有不足之处，请多指教。 ...
IE10以上input自带的叉号和眼睛
yuelife的博客
08-06 1053
从IE 10开始，type=”text” 的 input 在用户输入内容后，会自动产生一个小叉叉（X），方便用户点击清除已经输入的文本；type=”password” 的 input 在用户输入内容后，会自动产生一个小眼睛，用来显示或隐藏密码。怎样消除这个和其他浏览器的不同呢？ input::-ms-clear{display: none;} input::-ms-reveal{display: none;} 其中 ::-ms-clear 是文本清除按钮，也就是input右方的叉叉 ::-ms-revea
AntDesign-Vue登录页中密文切换且带前缀icon的a-input
前端-尔嵘
10-26 2982
<a-form-item> <a-input size="large" placeholder="请输入密码" autocomplete="autocomplete" :type="passwordType" v-decorator="['password', {rules: [{ required: true, message: '请输入密码', whitespace: true}]}]" .
HTML中的a标签实现点击下载
weixin_30826095的博客
01-18 5334
通常在咱们写项目的时候会遇到上传下载什么的，在上传完文件后会把文件的路径保存到数据库里以便下载，如果想不通过后台直接下载的话，可以把文件路径给a标签的属性href； <a href="/user/test/xxxx.txt">点击下载</a> 这样当用户打开浏览器点击链接的时候就会直接下载文件。 但是有个情况，比如txt,png,jpg等这些浏览器支持直接打开...
如何隐藏input边框,使其不显示
WilliamChang的专栏
02-18 1万+
如何隐藏input边框,使其不显示，主要用于table中的td元素！
antd input 密码框 报错问题
Sengoku_Xingzi的博客
10-10 412
外面套个from 标签就好了。
实现input密码框显示/隐藏的功能
05-30
你可以使用HTML和JavaScript来实现input密码框的显示/隐藏功能。以下是一种实现方式： HTML代码： ```html <label for="password">密码：</label> <input type="password" id="password" name="password"> <button type="button" id="showPassword">显示密码</button> ``` JavaScript代码： ```javascript const passwordInput = document.getElementById("password"); const showPasswordButton = document.getElementById("showPassword"); showPasswordButton.addEventListener("click", function() { if (passwordInput.type === "password") { passwordInput.type = "text"; showPasswordButton.textContent = "隐藏密码"; } else { passwordInput.type = "password"; showPasswordButton.textContent = "显示密码"; } }); ``` 这段代码中，我们首先获取了密码输入框和显示密码按钮的DOM元素。然后给显示密码按钮添加了一个点击事件监听器，当点击按钮时，我们判断密码输入框的type属性是否为"password"。如果是，就将其改为"text"，同时将按钮的文本改为"隐藏密码"；否则就将密码输入框的type属性改为"password"，同时将按钮的文本改为"显示密码"。这样，用户就可以通过点击按钮来切换密码输入框的显示/隐藏状态了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值