javascript - 如何根据订单中剩余的文本框对齐密码框

Question

实际上我正在验证密码并使用悬停在一个框中显示所需的先决条件，当我在 jsfiddle 中创建密码文本框时它正在工作但是当我想将该密码文本框合并到注册页面时页面的整个结构已经改变我不知道为什么它会改变。我在下面发布代码和 jsfiddle。

var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");

// When the user clicks on the password field, show the message box
myInput.onfocus = function() {
    document.getElementById("message").style.display = "block";
}

// When the user clicks outside of the password field, hide the message box
myInput.onblur = function() {
    document.getElementById("message").style.display = "none";
}

// When the user starts to type something inside the password field
myInput.onkeyup = function() {
  // Validate lowercase letters
  var lowerCaseLetters = /[a-z]/g;
  if(myInput.value.match(lowerCaseLetters)) {  
    letter.classList.remove("invalid");
    letter.classList.add("valid");
  } else {
    letter.classList.remove("valid");
    letter.classList.add("invalid");
  }
  
  // Validate capital letters
  var upperCaseLetters = /[A-Z]/g;
  if(myInput.value.match(upperCaseLetters)) {  
    capital.classList.remove("invalid");
    capital.classList.add("valid");
  } else {
    capital.classList.remove("valid");
    capital.classList.add("invalid");
  }

  // Validate numbers
  var numbers = /[0-9]/g;
  if(myInput.value.match(numbers)) {  
    number.classList.remove("invalid");
    number.classList.add("valid");
  } else {
    number.classList.remove("valid");
    number.classList.add("invalid");
  }
  
  // Validate length
  if(myInput.value.length >= 8) {
    length.classList.remove("invalid");
    length.classList.add("valid");
  } else {
    length.classList.remove("valid");
    length.classList.add("invalid");
  }
}

body {
margin:0;
background-repeat: no-repeat;
background-attachment: fixed;
 background-position: center; 
}

/* Style the tab */
.frame {
  height: 575px;
  width: 430px;
  background:
    linear-gradient(
    rgba(35,43,85,0.75),
    rgba(35,43,85,0.95));
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
  border-top: solid 1px rgba(255,255,255,.5);
  border-radius: 5px;
  box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
  overflow: hidden;
  transition: all .5s ease;
  
}
.nav {
	padding-top:40px;
}

li {
	
  padding-left: 10px;
  font-size: 18px;
  display: inline;
  text-align: left;
  text-transform: uppercase;
  padding-right: 10px;
  color: #ffffff;
  
}

.btn {
  cursor : pointer;
  color: rgb(255,255,255);
  padding: 10px;
}
			
.form-signin {
	padding-left:30px;
	padding-top:50px;
	padding-right:30px;
}

label {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 20px;
  padding-left: 15px;
  padding-bottom: 10px;
  color: rgb(255,255,255);
  display: block;
}

.form-styling {
  width: 100%;
  height: 35px;
  border: none;
  padding-left: 15px;
  border-radius: 15px;
  margin-bottom: 10px;
  background: rgba(255,255,255,.2);
  color :rgb(255,255,255);
}

.btn-animate {
  float: left;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 20px;
  text-align: center;
  color: rgba(255,255,255, 1);
  padding-top: 8px;
  width: 100%;
  height: 45px;
  border: none;
  border-radius: 20px;
  margin-top: 30px;
  margin-bottom:20px;
  background-color: rgba(16,89,255, 1);
  left: 0px;
  top: 0px;
  cursor: pointer;

}

.check
{
	font-size : 20px;
	padding-right: 10px;
	font-weight: 400;
  text-transform: uppercase;
  color: rgb(255,255,255);
  padding-left :15px;
	
}

.forgot
{
	color: rgba(255,255,255,.7);
	font-size:15px;
	font-weight:400px;
	cursor:pointer;
	text-decoration:underline;
	padding-left : 165px;
	
}

:focus {
	outline: none;
}
.toggle {
	background-color: rgb(0,0,0);
	border-radius: 25px;
}

span{
    background:#F8F8F8;
    border: 1px solid #DFDFDF;
    color: #717171;
    font-size: 15px;
    height: 40px;
    letter-spacing: 1px;
    
    position: relative;
    text-align: left;
    
    top: -190px;
    left:190px;
    display:none;
    padding:0 10px;
    
}


span:after{
    
    position:relative;
    
    
    
    border-bottom:1px solid #dfdfdf;
    border-right:1px solid #dfdfdf;
    background:#f8f8f8;
    
    
}
p{
    position:absolute;
    cursor:pointer;
}

p:hover span{
   display:block; 
}

.valid {
    color: green;
}
.valid:before {
    position: relative;
    left : -10px;
    content: "✔";
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
    color: red;
}

.invalid:before {
    position: relative;
    left:-10px;
    content: "✖";
}

<!DOCTYPE html>
  
  <div class="frame">
  <div class="nav">
  <ul>
  
  <li><a class="btn">Sign up </a></li>
  </ul>
    </div>
    
    <div class="signup-show">
    <form class="form-signin" action="/SignIn_Up/addadmin" method="post" name="form">
    <label for="username">FullName</label>
          <input class="form-styling" type="text" name="fullName" required/>
          <label for="email">Email</label>
          <input class="form-styling" type="text" name="email" required/>
          <label for="password">Password</label>
          <p><input class="form-styling" type="password" id="psw" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required><span id="letter" class="invalid">A Lowercase Letter</span><span id="capital" class="invalid">A Capital  Letter</span><span id="number" class="invalid">A <b>Number</b></span><span id="length" class="invalid">Minimum <b>8 Characters</b></span></p>
          <label for="password">Confirm Password</label>
          <input class="form-styling" id="confirmPassword" type="password" name="confirmPassword" min="6" max="15" required/>
         
                    <input class="btn-animate" type="Submit" value="Submit"/>

            <br/>
     </form>
    </div>

Answer 1

您定位元素的方式似乎是罪魁祸首。

这里有一个简单的解决方案。这会将您的密码要求包装在一个具有唯一 ID 和样式的范围内，以及相应的范围内以获得所需的行为这是:

body {
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}


/* Style the tab */

.frame {
  height: 575px;
  width: 430px;
  background: linear-gradient( rgba(35, 43, 85, 0.75), rgba(35, 43, 85, 0.95));
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
  border-top: solid 1px rgba(255, 255, 255, .5);
  border-radius: 5px;
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: all .5s ease;
}

.nav {
  padding-top: 40px;
}

li {
  padding-left: 10px;
  font-size: 18px;
  display: inline;
  text-align: left;
  text-transform: uppercase;
  padding-right: 10px;
  color: #ffffff;
}

.btn {
  cursor: pointer;
  color: rgb(255, 255, 255);
  padding: 10px;
}

.form-signin {
  padding-left: 30px;
  padding-top: 50px;
  padding-right: 30px;
}

label {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 20px;
  padding-left: 15px;
  padding-bottom: 10px;
  color: rgb(255, 255, 255);
  display: block;
}

.form-styling {
  width: 100%;
  height: 35px;
  border: none;
  padding-left: 15px;
  border-radius: 15px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, .2);
  color: rgb(255, 255, 255);
}

.btn-animate {
  float: left;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  padding-top: 8px;
  width: 100%;
  height: 45px;
  border: none;
  border-radius: 20px;
  margin-top: 30px;
  margin-bottom: 20px;
  background-color: rgba(16, 89, 255, 1);
  left: 0px;
  top: 0px;
  cursor: pointer;
}

.check {
  font-size: 20px;
  padding-right: 10px;
  font-weight: 400;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  padding-left: 15px;
}

.forgot {
  color: rgba(255, 255, 255, .7);
  font-size: 15px;
  font-weight: 400px;
  cursor: pointer;
  text-decoration: underline;
  padding-left: 165px;
}

:focus {
  outline: none;
}

.toggle {
  background-color: rgb(0, 0, 0);
  border-radius: 25px;
}

span {
  background: #F8F8F8;
  border: 1px solid #DFDFDF;
  color: #717171;
  font-size: 15px;
  height: 40px;
  letter-spacing: 1px;
  position: relative;
  text-align: left;
  display: none;
  padding: 0 10px;
}

#reqs{
  padding: 0;
  margin: 0;
  border: 0;
  position:absolute;
  top: 165px;  
  left:225px;
  
}

span:after {
  position: relative;
  border-bottom: 1px solid #dfdfdf;
  border-right: 1px solid #dfdfdf;
  background: #f8f8f8;
}

p {
  position: relavive;
  cursor: pointer;
  margin:0;
}

p:hover span {
  display: block;
}

.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -10px;
  content: "✔";
}


/* Add a red text color and an "x" when the requirements are wrong */

.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -10px;
  content: "✖";
}

<div class="frame">
  <div class="nav">
    <ul>

      <li><a class="btn">Sign up </a></li>
    </ul>
  </div>

  <div class="signup-show">
    <form class="form-signin" action="/SignIn_Up/addadmin" method="post" name="form">
      <label for="username">FullName</label>
      <input class="form-styling" type="text" name="fullName" required/>
      <label for="email">Email</label>
      <input class="form-styling" type="text" name="email" required/>
      <label for="password">Password</label>
      <p><input class="form-styling" type="password" id="psw" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
        <span id="reqs"><span id="letter" class="invalid">A Lowercase Letter</span><span id="capital" class="invalid">A Capital  Letter</span><span id="number" class="invalid">A <b>Number</b></span><span id="length" class="invalid">Minimum <b>8 Characters</b></span></span>
      </p>
      <label for="password">Confirm Password</label>
      <input class="form-styling" id="confirmPassword" type="password" name="confirmPassword" min="6" max="15" required/>

      <input class="btn-animate" type="Submit" value="Submit" />

      <br/>
    </form>
  </div>

我最幸运的是将需求直接放在有问题的输入下方，并让页面和其他元素围绕它们流动。这使您的页面结构保持美观和干净，并且不会将您的值发送到页面之外。我将在下面向您展示要执行此操作需要更改的内容。

首先，您需要将 p 标记的 position 更改为 relative(当前设置为 absolute。如果你想在 span 下面看到输入和按钮，你只需要将 .frame 类的 height 更改为 auto 而不是 575px 的固定高度。这看起来仍然很奇怪，因为您已将要求放在相关输入的左侧和上方。正如我所说，我认为如果您只需让它们随页面流动并进入有问题的输入下方(这在移动设备上看起来也会更好。为此，您只需摆脱 top 和 left 来自 span 标签的样式。

这是一个代码片段，其中包含以下更改。

body {
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}


/* Style the tab */

.frame {
  height: auto;
  width: 430px;
  background: linear-gradient( rgba(35, 43, 85, 0.75), rgba(35, 43, 85, 0.95));
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
  border-top: solid 1px rgba(255, 255, 255, .5);
  border-radius: 5px;
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: all .5s ease;
}

.nav {
  padding-top: 40px;
}

li {
  padding-left: 10px;
  font-size: 18px;
  display: inline;
  text-align: left;
  text-transform: uppercase;
  padding-right: 10px;
  color: #ffffff;
}

.btn {
  cursor: pointer;
  color: rgb(255, 255, 255);
  padding: 10px;
}

.form-signin {
  padding-left: 30px;
  padding-top: 50px;
  padding-right: 30px;
}

label {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 20px;
  padding-left: 15px;
  padding-bottom: 10px;
  color: rgb(255, 255, 255);
  display: block;
}

.form-styling {
  width: 100%;
  height: 35px;
  border: none;
  padding-left: 15px;
  border-radius: 15px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, .2);
  color: rgb(255, 255, 255);
}

.btn-animate {
  float: left;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  padding-top: 8px;
  width: 100%;
  height: 45px;
  border: none;
  border-radius: 20px;
  margin-top: 30px;
  margin-bottom: 20px;
  background-color: rgba(16, 89, 255, 1);
  left: 0px;
  top: 0px;
  cursor: pointer;
}

.check {
  font-size: 20px;
  padding-right: 10px;
  font-weight: 400;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  padding-left: 15px;
}

.forgot {
  color: rgba(255, 255, 255, .7);
  font-size: 15px;
  font-weight: 400px;
  cursor: pointer;
  text-decoration: underline;
  padding-left: 165px;
}

:focus {
  outline: none;
}

.toggle {
  background-color: rgb(0, 0, 0);
  border-radius: 25px;
}

span {
  background: #F8F8F8;
  border: 1px solid #DFDFDF;
  color: #717171;
  font-size: 15px;
  height: 40px;
  letter-spacing: 1px;
  position: relative;
  text-align: left;
  display: none;
  padding: 0 10px;
}

span:after {
  position: relative;
  border-bottom: 1px solid #dfdfdf;
  border-right: 1px solid #dfdfdf;
  background: #f8f8f8;
}

p {
  position: relavive;
  cursor: pointer;
}

p:hover span {
  display: block;
}

.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -10px;
  content: "✔";
}


/* Add a red text color and an "x" when the requirements are wrong */

.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -10px;
  content: "✖";
}

<div class="frame">
  <div class="nav">
    <ul>

      <li><a class="btn">Sign up </a></li>
    </ul>
  </div>

  <div class="signup-show">
    <form class="form-signin" action="/SignIn_Up/addadmin" method="post" name="form">
      <label for="username">FullName</label>
      <input class="form-styling" type="text" name="fullName" required/>
      <label for="email">Email</label>
      <input class="form-styling" type="text" name="email" required/>
      <label for="password">Password</label>
      <p><input class="form-styling" type="password" id="psw" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
        <span id="letter" class="invalid">A Lowercase Letter</span><span id="capital" class="invalid">A Capital  Letter</span><span id="number" class="invalid">A <b>Number</b></span><span id="length" class="invalid">Minimum <b>8 Characters</b></span></p>
      <label for="password">Confirm Password</label>
      <input class="form-styling" id="confirmPassword" type="password" name="confirmPassword" min="6" max="15" required/>

      <input class="btn-animate" type="Submit" value="Submit" />

      <br/>
    </form>
  </div>