html - 密码在输入中不可见(在 chrome 中工作正常)在 firefox 中不可见

Question

我正在为密码验证创建一个下拉复选框。我已经将输入的背景更改为聚焦它。但是，即使在为其指定样式之后，密码也不会显示在输入的黑色圆盘中。代码:

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

$("#Password").click(function() {
  document.getElementById("myDropdown").classList.toggle("show");
});

$("#Password").keyup(function() {
  var input = $(this).val();

  $("#oneCharacter").attr('checked', hasLetters(input));
  $("#oneNumber").attr('checked', hasNumbers(input));
  $("#strongPassword").attr('checked', isStrong(input));
});

var isStrong = function(input) {
  if (input.length > 8 && input.length < 16)
    return true;
};

var hasLetters = function(input) {
  return input.match(/[a-zA-Z]/);
};

var hasNumbers = function(input) {
  return input.match(/[0-9]/);
};

var hasSymbols = function(input) {
  return true;
};

var containsNoInvalidInput = function(input) {
  return true;
};

body {
  margin: 4%;
}

.dropbtn {
  background-color: white;
  padding: 16px;
  font-size: 16px;
  border: 2px solid #ccc;
  cursor: pointer;
  height: 0px;
  margin-bottom: 10px;
  width: inherit;
  border: 2px solid;
  border-radius: 5px;
}

input[type="password"] {
  -webkit-text-security: disc;
  color: black;
}

.dropbtn:hover,
.dropbtn:focus {
  border: 2px solid #A0392F;
  background-color: #F7DDD8;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding-left: 40px;
  width: inherit;
  overflow: hidden;
  border: 2px solid;
  margin-top: -10px;
  font-size: 20px;
  padding: 30px;
  border-top: #B36F7A;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #f1f1f1
}

.squaredFour {
  width: 20px;
  position: relative;
  margin: 20px auto;
  label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: #fcfff4;
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 4px;
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
    &:after {
      content: '';
      width: 9px;
      height: 5px;
      position: absolute;
      top: 4px;
      left: 4px;
      border: 3px solid #333;
      border-top: none;
      border-right: none;
      background: transparent;
      opacity: 0;
      transform: rotate(-45deg);
    }
    &:hover::after {
      opacity: 0.5;
    }
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked+label:after {
      opacity: 1;
    }
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="row">
  <div class="col-md-6" style="text-align:left;">
    <span style="font-weight: 900;font-size: 25px;">New Password</span>
  </div>

  <div class="row">
    <div class="col-md-12">
      <input type="password" id="Password" class="dropbtn">
      <div id="myDropdown" class="dropdown-content">
        <div class="row" style="text-align:left;"> <input type="checkbox" id="strongPassword" name="check" class="checkboxValid" /> <label for="squaredFour">8 - 16 characters long</label></div>
        <div class="row" style="text-align:left;"> <input type="checkbox" id="oneCharacter" name="check" class="checkboxValid" /> <label for="squaredFour">At least one letter</label></div>
        <div class="row" style="text-align:left;"> <input type="checkbox" id="oneNumber" name="check" class="checkboxValid" /> <label for="squaredFour">At least one number</label></div>
        <div class="row" style="text-align:left;"> <input type="checkbox" id="oneSymbol" name="check" class="checkboxValid" /> <label for="squaredFour">At least one symbol</label></div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-4" style="text-align: right;">
      Confirm Password
    </div>
    <div class="col-md-4">
      <input type="password" id="" class="">
    </div>
  </div>

Answer 1

如果您希望密码可见，但如果您希望光盘保留为 type="password"，只需将输入类型更改为文本。 firefox 中的问题是因为您设置的高度。请参阅更新的代码片段。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    body {
      margin: 4%;
    }
    
    .dropbtn {
      background-color: white;
      padding: 10px;
      font-size: 16px;
      border: 2px solid #ccc;
      cursor: pointer;
      height: auto;
      margin-bottom: 10px;
      width: inherit;
      border: 2px solid;
      border-radius: 5px;
    }
    
    input[type="password"] {
      -webkit-text-security: disc;
      color: black;
    }
    
    .dropbtn:hover,
    .dropbtn:focus {
      border: 2px solid #A0392F;
      background-color: #F7DDD8;
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
      position: absolute;
      background-color: #f9f9f9;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
      padding-left: 40px;
      width: inherit;
      overflow: hidden;
      border: 2px solid;
      margin-top: -10px;
      font-size: 20px;
      padding: 30px;
      border-top: #B36F7A;
    }
    
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    
    .dropdown a:hover {
      background-color: #f1f1f1
    }
    
    .squaredFour {
      width: 20px;
      position: relative;
      margin: 20px auto;
      label {
        width: 20px;
        height: 20px;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        background: #fcfff4;
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        border-radius: 4px;
        box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
        &:after {
          content: '';
          width: 9px;
          height: 5px;
          position: absolute;
          top: 4px;
          left: 4px;
          border: 3px solid #333;
          border-top: none;
          border-right: none;
          background: transparent;
          opacity: 0;
          transform: rotate(-45deg);
        }
        &:hover::after {
          opacity: 0.5;
        }
      }
      input[type=checkbox] {
        visibility: hidden;
        &:checked+label:after {
          opacity: 1;
        }
      }
    }
  </style>
</head>

<body>

  <div class="row">
    <div class="col-md-6" style="text-align:left;">
      <span style="font-weight: 900;font-size: 25px;">New Password</span>
    </div>

    <div class="row">
      <div class="col-md-12">
        <input type="password" id="Password" class="dropbtn">
        <div id="myDropdown" class="dropdown-content">
          <div class="row" style="text-align:left;"> <input type="checkbox" id="strongPassword" name="check" class="checkboxValid" /> <label for="squaredFour">8 - 16 characters long</label></div>
          <div class="row" style="text-align:left;"> <input type="checkbox" id="oneCharacter" name="check" class="checkboxValid" /> <label for="squaredFour">At least one letter</label></div>
          <div class="row" style="text-align:left;"> <input type="checkbox" id="oneNumber" name="check" class="checkboxValid" /> <label for="squaredFour">At least one number</label></div>
          <div class="row" style="text-align:left;"> <input type="checkbox" id="oneSymbol" name="check" class="checkboxValid" /> <label for="squaredFour">At least one symbol</label></div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-4" style="text-align: right;">
        Confirm Password
      </div>
      <div class="col-md-4">
        <input type="password" id="" class="">
      </div>
    </div>
    <script>
      window.onclick = function(event) {
        if (!event.target.matches('.dropbtn')) {
          var dropdowns = document.getElementsByClassName("dropdown-content");
          var i;
          for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
              openDropdown.classList.remove('show');
            }
          }
        }
      }

      $("#Password").click(function() {
        document.getElementById("myDropdown").classList.toggle("show");
      });

      $("#Password").keyup(function() {
        var input = $(this).val();

        $("#oneCharacter").attr('checked', hasLetters(input));
        $("#oneNumber").attr('checked', hasNumbers(input));
        $("#strongPassword").attr('checked', isStrong(input));
      });

      var isStrong = function(input) {
        if (input.length > 8 && input.length < 16)
          return true;
      };

      var hasLetters = function(input) {
        return input.match(/[a-zA-Z]/);
      };

      var hasNumbers = function(input) {
        return input.match(/[0-9]/);
      };

      var hasSymbols = function(input) {
        return true;
      };

      var containsNoInvalidInput = function(input) {
        return true;
      };
    </script>

</body>

</html>