首页 > 其他分享 >原生JS实现:密码输入框显示隐藏密码效果

原生JS实现:密码输入框显示隐藏密码效果

时间:2023-02-10 20:33:37浏览次数:52  
标签:eye 输入框 pwd 文本框 JS 密码 flag 切换

案例:密码输入框显示隐藏密码 原生JS书写
需求:点击按钮将密码框切换为文本框,并可以查看密码铭文

案例分析

  1. 核心思路:点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码
  2. 一个按钮两个状态,点击一次,切换为文本框,继续点击一次切换为密码框
  3. 算法:利用一个flag变量,来判断flag值,如果时 1 就切换为文本框, flag 设置为 0 ,如果是 0 就切换为密码框, flag 设置为 1
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      position: relative;
      width: 400px;
      border-bottom: 1px solid #ccc;
      margin: 100px auto;
    }
    .box input{
      width: 370px;
      height: 30px;
      border: 0;
      outline: none;
    }
    .box img{
      position: absolute;
      top: 2px;
      right: 2px;
      width: 24px;
    }
  </style>
</head>
<body>
  <div class="box">
    <label for="">
      <img src="images/close.png" alt="" id="eye">
    </label>
    <input type="password" id="pwd">
  </div>

  <script>
    // 1. 获取元素
    var eye = document.getElementById('eye');
    var pwd = document.getElementById('pwd');
    // 2. 注册事件,处理程序
    var flag = 0;
    eye.onclick = function() {
      if (flag == 0) {
        pwd.type = 'text';
        eye.src = 'images/open.png';
        flag = 1;
      } else {
        pwd.type = 'password';
        eye.src = 'images/close.png';
        flag = 0;
      }
    }
  </script>
</body>

标签:eye,输入框,pwd,文本框,JS,密码,flag,切换
From: https://www.cnblogs.com/zhuhukang/p/17110217.html

相关文章

  • JSP_基本知识
    简而言之,把tomcat服务器会自动把jsp文件转译为servlet类。   一、简介服务器响应客户端,大部分时候是响应一个html页面。而在Servlet中使用io流编写html代码,很麻......
  • js实现光标移入和移出元素事件
    js实现光标移入和移出元素事件效果实现:  代码:i标签添加事件varonmouse='onmouseover="overshow(this)"onmouseout="overhiden(this)"';<aname="rowi......
  • sheetjs导出表格时间错误问题
    最近使用sheetjs,前端web去导出生成excel,xlsx表格。其中遇到一种问题,那就是时间出错了!比如多出8小时43秒,少了43秒。看到这种问题的时候,我也一脸懵逼。先上图!不过在有......
  • fastjson场景
    json转java对象//将Json字符串通过fastjson转为JSONObject对象JSONObjectjsonObject=JSONObject.parseObject(userJson);//将JSONObject对象转为Object实体对象U......
  • js 可视区域的判断
    之前看 vuetifyjs 文档,然后看到一个【交叉观察者】,觉得很有意思,我就在想,一个dom元素,在页面中,我们怎么判断它是在可视区域内呢?1.方法1:getBoundingClientRectletdomR......
  • ChatGPT: delphi rtti访问类公共属性生成json字符串
    usesSystem.Rtti,System.JSON;typeTPerson=classpublicName:string;Age:Integer;end;functionObjectToJSON(AObject:TObject):string;......
  • 基于 `CommonJS` 谈谈前端模块化
    基于CommonJS谈谈前端模块化前端模块化的内容贯穿我们平时的开发工作,最早的AMD等模块化组织方式现在已经很少使用,本课程基于目前最常见的CommonJS(以下简称为CMJ)出......
  • 直播app开发搭建,vue使用js-file-download完成导出功能
    直播app开发搭建,vue使用js-file-download完成导出功能1.安装js-file-downloadnpminstalljs-file-download​2.引入对应的功能模块importfileDownLoadfrom'js-file......
  • js传递参数获取到的是object或object HTMLFormElement
      这样clearSample获取到的参数是一个object  解决办法    原因:当在字符串中拼接变量时需要\""+变量名+"\" 如果完成引号不转义html就不会识别引号......
  • js基础笔记学习173-数组的解构1
    ......