原生实现输入框隐藏密码明文

输入框隐藏密码明文

思路:
1.对输入框和按钮进行绑定事件
2.点击按钮,输入框里面的密码能显示和隐藏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>输入框隐藏密码明文</title>
</head>

<body>
  <input type="password" name="" id="inp">
  <button>显示</button>

  <script>
    /* 1.对输入框和按钮进行绑定事件
    2.点击按钮,输入框里面的密码能显示和隐藏
     */
    var inp = document.getElementById("inp")
    var btn = document.querySelector("button")
    //  给按钮绑定事件类型
    var isFlag = 0
    btn.onclick = function () {
      if (isFlag == 0) {//核心算法,利用isFlag来实现显示和隐藏
        inp.type = "teext"
        btn.innerHTML = "隐藏"
        isFlag = 1
      } else {
        inp.type = "password"
        btn.innerHTML = "显示"
        isFlag = 0
      }
    }

  </script>
</body>

</html>

Guess you like

Origin blog.csdn.net/weixin_47389477/article/details/106933890