密码设置隐藏

菜鸟级码农小林

已于 2022-04-28 14:11:34 修改

阅读量139

点赞数

分类专栏： JavaScript html 文章标签： javascript html

于 2022-04-28 12:08:27 首次发布

本文链接：https://blog.csdn.net/m0_59735348/article/details/124470870

版权

本文探讨了如何在网页中实现密码的安全隐藏与验证，重点介绍了使用JavaScript和HTML来增强用户密码输入的安全性，包括密码强度检测、遮罩显示切换及前端验证策略。

摘要由CSDN通过智能技术生成

<html>
    <div>
      <img src="./close.jpg" alt="" id="eye" />
      <input type="password" placeholder="请输入密码" id="pwd" />
    </div>
</html>
<script>
      //1. 获取元素
      var pwd = document.getElementById("pwd");
      var eye = document.getElementById("eye");
      var change = 0;  //设置一个变量
      //2. 添加事件
      eye.onclick = function () {
        if (change == 0) {
          pwd.type = "text";
          eye.src = "./open.jpg";
          change = 1;
        } else {
          pwd.type = "password";
          eye.src = "./close.jpg";
          change = 0;
        }
      };
</script>
<style>
    img {
      width: 20px;
      position: absolute;
      right:5px;
      top:8px;
    }
    div {
      width: 300px;
      border-bottom: 1px solid #ccc;