2.用js实现显示和隐藏密码

雨点打透心脏的1/2处 2022-12-12 04:38 196阅读 0赞

css代码如下：

<style> *{            
       margin: 0;      
       padding: 0;       
        }       
     input{          
       border: none;         
       outline: none;         
       padding-bottom: 8px;      
         }       
      .box{          
        width: 300px;
        border-bottom: 1px solid #eee;
           margin: 100px auto;       
          }        
      img {            
       width: 25px;            
       cursor: pointer;        
       }
        </style>

HTML代码如下：

<div class="box">        
     <input type="password" name="" id="">       
      <img src="./image/close.png" alt="">    
      </div>

js代码如下：

<script>        
     var img = document.querySelector('img')        
     var input = document.querySelector('input')        
     // 创建变量，用于控制input的状态变化 
     var flag = false        
     img.onclick = function(){             
     if (flag == false){                
      input.type = 'text'                
      this.src='./image/open.png'                
      flag=true            
      }else{                 
      input.type='password'                
      this.src='./image/close.png'            
      }        
      }    
      </script>

效果如下：  
![在这里插入图片描述][20201005195435329.png_pic_center]  
![在这里插入图片描述][20201005195449246.png_pic_center]

[20201005195435329.png_pic_center]: /images/20221123/d2754390eba34e95ab234d904e6ecdd7.png
[20201005195449246.png_pic_center]: /images/20221123/1dd8b072081e47ef847b1df7549192c9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，196人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue+element-ui实现显示隐藏密码

*1.第一种方法通过控制样式，还有vue的v-if 条件渲染来实现。代码如下：** ![在这里插入图片描述][20190822111552514.png]![在这里插...

妖狐艹你老母/ 2024年04月17日 05:27/ 0 赞/ 52 阅读

相关 js控制元素隐藏和显示

方法一： document.querySelector("id").style.visibility="hidden"; document.quer

爱被打了一巴掌/ 2023年06月08日 15:53/ 0 赞/ 15 阅读

相关仿京东显示隐藏密码

![在这里插入图片描述][2020061221083895.gif] 素材 ![在这里插入图片描述][20200612210927899.png] ![在这里插入图

刺骨的言语ヽ痛彻心扉/ 2023年02月17日 06:16/ 0 赞/ 9 阅读

相关 2.用js实现显示和隐藏密码

css代码如下： <style> { margin: 0; padding: 0;

雨点打透心脏的1/2处/ 2022年12月12日 04:38/ 0 赞/ 197 阅读

相关 angularjs2.x 密码隐藏显示的实例

angularjs2 ng2 密码隐藏显示代码结合ionic2开发移动端项目，注册页的密码的input一般用password，但是用户输入密码时可能会输入错误，需要显示成tex

蔚落/ 2022年05月27日 09:15/ 0 赞/ 195 阅读

相关 js实现显示与隐藏

总结如下： 1.jQuery中隐藏元素的hide方法让页面上的元素不可见，一般可以通过设置css的display为none属性。但是通过css直接修改是静态

亦凉/ 2022年05月26日 08:15/ 0 赞/ 1094 阅读

相关密码隐藏/显示的简单实现

先上效果图吧： ![20180515113121636][] ![201805151131466][] 实现原理：原理很简单，就是通过对显示密码单选框选中状态

短命女/ 2022年05月25日 13:07/ 0 赞/ 454 阅读

相关 input 密码显示与隐藏

H5隐藏密码与显示 HTML <div class="weui-cell__bd new_password"> <input clas

深藏阁楼爱情的钟/ 2022年01月19日 01:59/ 0 赞/ 480 阅读

相关 vue+element-ui实现显示隐藏密码

<template> <div id='test'> <el-form :model="formPassword" label-

川长思鸟来/ 2021年07月25日 16:41/ 0 赞/ 643 阅读

相关 vue实现密码显示隐藏、很简单易懂

效果： ![20210319180857547.gif][] 思路： 1. 利用input的type属性，当type值是text的时候展示密码，当t

系统管理员/ 2021年07月24日 13:58/ 0 赞/ 580 阅读