当前位置：网站首页>Show or hide password plaintext + password box verification information

Show or hide password plaintext + password box verification information

2022-07-24 18:20:00 【lalaxuan】

️ Show or hide password plaintext Common functions and practices of unlocking the front-end password box
Insert picture description here 

<!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: 1px solid #ccc; margin: 100px auto; } .box input {
      width: 370px; height: 30px; border: 0; outline: none; } .box .image {
      position: absolute; right: 2px; top: 4px; border: 1px solid #ccc; background-color: #ccccccba; border-radius: 50%; /*  Hide the four corners of the picture with more boxes  */ overflow: hidden; } .box img {
      /*  Parent box is img open   Remove the gap below  */ vertical-align: bottom; width: 22px; } </style>
</head>
<body>
  <div class="box">
    <!--  picture  -->
    <div class="image">
      <img src="img/close.png" alt="" id="img">
    </div>
    <!--  Password box  -->
    <input type="password" id="pwd">
  </div>

  <script> var img = document.getElementById('img'); var pwd = document.getElementById('pwd'); var flag = 0; img.onclick = function() {
      if(flag == 0) {
      pwd.type = 'text'; // this Point to the caller of the event function   namely img this.src = 'img/eye.png'; flag = 1; }else {
      pwd.type = 'password'; this.src = 'img/close.png'; flag = 0; } } </script>

</body>
</html>

Password box authentication information
demonstration 

<!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> .register {
      width: 600px; margin: 100px auto; } .ipt {
      width: 300px; border: 1px solid #999; outline: none; } .message {
      display: inline-block; height: 20px; font-size: 12px; color: #999; /*  After adding pictures   Add left inner margin to the text   Move the text to the right without blocking the picture */ background: url(img/maohao.png) no-repeat left center; padding-left: 30px; } .wrong {
      color: red; background: url(img/error.png) no-repeat left center; } .right {
      color: green; background: url(img/right.png) no-repeat left center; } </style>
</head>
<body>
  <div class="register">
    <input type="password" class="ipt">
    <p class="message"> Please enter 6-16 Bit code </p>
  </div>

  <script> var ipt = document.querySelector('.ipt'); var msg = document.querySelector('.message'); //  Use the above method   Realization   Press down enter Keys don't judge   Use onchange Sure  // //  Forms   When you get the focus   Border discoloration  // ipt.onfocus = function() {
      // this.style.borderColor = 'skyblue'; // } // //  Forms lose focus   The border reverts to its original color   And judge the number of bits and add the class name   Change the text content  // ipt.onblur = function() {
      // this.style.borderColor = '#999'; // if(this.value.length < 6 || this.value.length > 16) {
      // msg.className = 'message wrong'; // msg.innerHTML = ' The number of digits you entered does not meet the requirements 6-16 position '; // }else {
      // msg.className = 'message right'; // msg.innerHTML = ' Input correct ！'; // } // } ipt.onchange = function() {
      if(this.value.length < 6 || this.value.length > 16) {
      msg.className = 'message wrong'; msg.innerHTML = ' The number of digits you entered does not conform to the rule '; }else {
      msg.className = 'message right'; msg.innerHTML = ' Input correct '; } } </script>
</body>
</html>
原网站

版权声明
本文为[lalaxuan]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/203/202207211139308464.html

边栏推荐

猜你喜欢

随机推荐