javascript - 如何在密码输入字段旁边显示 div？

Question

我正在尝试在输入字段旁边显示密码验证框。此逻辑有效，但具有所有密码要求的框未显示在正确的位置。它不是位于 field 旁边，而是显示在 field 上方。这是示例:

$('input[type=password]').keyup(function() {
	var pswd = $(this).val();
	
    //validate the length
	if ( pswd.length < 8 ) {
	    $('#length').removeClass('valid').addClass('invalid');
	} else {
	    $('#length').removeClass('invalid').addClass('valid');
	}

    //validate letter
	if ( pswd.match(/[A-z]/) ) {
	    $('#letter').removeClass('invalid').addClass('valid');
	} else {
	    $('#letter').removeClass('valid').addClass('invalid');
	}

	//validate capital letter
	if ( pswd.match(/[A-Z]/) ) {
	    $('#capital').removeClass('invalid').addClass('valid');
	} else {
	    $('#capital').removeClass('valid').addClass('invalid');
	}

	//validate number
	if ( pswd.match(/\d/) ) {
	    $('#number').removeClass('invalid').addClass('valid');
	} else {
	    $('#number').removeClass('valid').addClass('invalid');
	}
}).focus(function() {
    $('#pswd_info').show();
}).blur(function() {
    $('#pswd_info').hide();
});

.form-group.required .control-label:after {
  	content: "*";
  	color: red;
}
#pswd_info {
    position:absolute;
    bottom:-75px;
    bottom: -115px\9; /* IE Specific */
    right:55px;
    width:250px;
    padding:15px;
    background:#fefefe;
    font-size:.875em;
    border-radius:5px;
    box-shadow:0 1px 3px #ccc;
    border:1px solid #ddd;
}
#pswd_info h4 {
    margin:0 0 10px 0;
    padding:0;
    font-weight:normal;
}
#pswd_info::before {
    content: "\25B2";
    position:absolute;
    top:-12px;
    left:45%;
    font-size:14px;
    line-height:14px;
    color:#ddd;
    text-shadow:none;
    display:block;
}
.invalid {
    background:url(../images/invalid.png) no-repeat 0 50%;
    padding-left:22px;
    line-height:24px;
    color:#ec3f41;
}
.valid {
    background:url(../images/valid.png) no-repeat 0 50%;
    padding-left:22px;
    line-height:24px;
    color:#3a7d34;
}
#pswd_info {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <form>
    <div class="form-group required">
      <label class="control-label" for="fname">First Name</label>
      <input type="text" class="form-control" name="temp_fname" id="temp_fname" placeholder="Enter First Name" maxlength="50" required>
    </div>
    <div class="form-group required">
      <label class="control-label" for="lname">Last Name</label>
      <input type="text" class="form-control" name="temp_lname" id="temp_lname" placeholder="Enter Last Name" maxlength="50" required>
    </div>
    <div class="form-group required">
      <label class="control-label" for="username">UserName</label>
      <input type="text" class="form-control" name="temp_username" id="temp_username" placeholder="Enter UserName" maxlength="50" required>
    </div>
    <div class="form-group required">
      <label class="control-label" for="password">Password</label>
      <input type="password" class="form-control" name="temp_password" id="temp_password" placeholder="Enter Password" maxlength="64" required>
      <small id="passwordHelp" class="form-text text-muted">Special characters are allowd:  <span class="text-danger">!"#$%&'()*+,-.:;<=>?@[\]^_`{|}~</span></small>
    </div>
    <div class="form-group required">
      <label class="control-label" for="email">Email address</label>
      <input type="email" class="form-control" name="temp_email" id="temp_email" placeholder="Enter email" maxlength="80" required>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
<div id="pswd_info">
  <h4>Password must meet the following requirements:</h4>
  <ul>
    <li id="letter" class="invalid">At least <strong>one letter</strong></li>
    <li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
    <li id="number" class="invalid">At least <strong>one number</strong></li>
    <li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
  </ul>
</div>

有没有办法在密码输入字段旁边显示密码框？如果框位于输入字段的右侧，框上的箭头也可以从框的左侧指向吗？应该替换元素符号的图像存在问题。我不确定为什么会显示元素符号和图像。只有图像应该在那里。如果有人看到为什么我的代码被破坏，请告诉我。

Answer 1

试试这个:

$('input[type=password]').keyup(function() {
	var pswd = $(this).val();
	
    //validate the length
	if ( pswd.length < 8 ) {
	    $('#length').removeClass('valid').addClass('invalid');
	} else {
	    $('#length').removeClass('invalid').addClass('valid');
	}

    //validate letter
	if ( pswd.match(/[A-z]/) ) {
	    $('#letter').removeClass('invalid').addClass('valid');
	} else {
	    $('#letter').removeClass('valid').addClass('invalid');
	}

	//validate capital letter
	if ( pswd.match(/[A-Z]/) ) {
	    $('#capital').removeClass('invalid').addClass('valid');
	} else {
	    $('#capital').removeClass('valid').addClass('invalid');
	}

	//validate number
	if ( pswd.match(/\d/) ) {
	    $('#number').removeClass('invalid').addClass('valid');
	} else {
	    $('#number').removeClass('valid').addClass('invalid');
	}
}).focus(function() {
    $('#pswd_info').show();
}).blur(function() {
    $('#pswd_info').hide();
});

.form-group.required .control-label:after {
  	content: "*";
  	color: red;
}

.password-container {
  position: relative;
}
#pswd_info {
    position:absolute;
    top: 85px;
    left: 25px;
    width:250px;
    padding:15px;
    background:#fefefe;
    font-size:.875em;
    border-radius:5px;
    box-shadow:0 1px 3px #ccc;
    border:1px solid #ddd;
}
#pswd_info h4 {
    margin:0 0 10px 0;
    padding:0;
    font-weight:normal;
}
#pswd_info::before {
    content: "\25B2";
    position:absolute;
    top:-12px;
    left:45%;
    font-size:14px;
    line-height:14px;
    color:#ddd;
    text-shadow:none;
    display:block;
}
.invalid {
    background:url(../images/invalid.png) no-repeat 0 50%;
    padding-left:22px;
    line-height:24px;
    color:#ec3f41;
}
.valid {
    background:url(../images/valid.png) no-repeat 0 50%;
    padding-left:22px;
    line-height:24px;
    color:#3a7d34;
}
#pswd_info {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <form>
    <div class="form-group required">
      <label class="control-label" for="fname">First Name</label>
      <input type="text" class="form-control" name="temp_fname" id="temp_fname" placeholder="Enter First Name" maxlength="50" required>
    </div>
    <div class="form-group required">
      <label class="control-label" for="lname">Last Name</label>
      <input type="text" class="form-control" name="temp_lname" id="temp_lname" placeholder="Enter Last Name" maxlength="50" required>
    </div>
    <div class="form-group required">
      <label class="control-label" for="username">UserName</label>
      <input type="text" class="form-control" name="temp_username" id="temp_username" placeholder="Enter UserName" maxlength="50" required>
    </div>
    <div class="form-group required password-container">
      <label class="control-label" for="password">Password</label>
      <input type="password" class="form-control" name="temp_password" id="temp_password" placeholder="Enter Password" maxlength="64" required>
      <small id="passwordHelp" class="form-text text-muted">Special characters are allowd:  <span class="text-danger">!"#$%&'()*+,-.:;<=>?@[\]^_`{|}~</span></small>
      <div id="pswd_info">
        <h4>Password must meet the following requirements:</h4>
        <ul>
          <li id="letter" class="invalid">At least <strong>one letter</strong></li>
          <li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
          <li id="number" class="invalid">At least <strong>one number</strong></li>
          <li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
        </ul>
      </div>
    </div>
    <div class="form-group required">
      <label class="control-label" for="email">Email address</label>
      <input type="email" class="form-control" name="temp_email" id="temp_email" placeholder="Enter email" maxlength="80" required>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

• 我将弹出窗口的位置移到了保存密码的 block 内。
• 我将包含 block 的 position 设置为 relative。这允许 children 相对于这个 block 定位而不移动 block
• 我将 CSS 更改为基于新父 block 的位置