javascript - 无法使用 CSS 在其位置设置计数器值

Question

我无法使用 span 标记设置计数器的值。当密码出现 Span 标签时，计数器的值会从其原始位置移位/错位。

但是当我通过满足要求输入密码并且 span 标记的消息消失时，计数器又回到输入字段内的原始位置。

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}

.form-control.error {
  border-color: red;
}

.form-hint {
  font-size: 9pt;
  line-height: 10pt;
  margin: 3px auto 5px;
  color: #999;
}

.form-hint.error {
  color: #C00;
  font-weight: bold;
  font-size: 8pt;
}

.password-count {
  float: right;
  position: relative;
  bottom: 25px;
  right: 10px;
}

.strength-meter {
  position: relative;
  height: 6px;
  background: #DDD;
  margin: 10px auto 20px;
  border-radius: 3px;
}

.strength-meter:before,
.strength-meter:after {
  content: '';
  height: inherit;
  background: transparent;
  display: block;
  border-color: #FFF;
  border-style: solid;
  border-width: 0 5px 0 5px;
  position: absolute;
  width: 80px;
  z-index: 10;
}

.strength-meter:before {
  left: 70px;
}

.strength-meter:after {
  right: 70px;
}

.strength-meter-fill {
  background: transparent;
  height: inherit;
  position: absolute;
  width: 0;
  border-radius: inherit;
  transition: width 0.5s ease-in-out, background 0.25s;
}

.strength-meter-fill[data-strength='0'] {
  background: darkred;
  width: 20%;
}

.strength-meter-fill[data-strength='1'] {
  background: orangered;
  width: 40%;
}

.strength-meter-fill[data-strength='2'] {
  background: orange;
  width: 60%;
}

.strength-meter-fill[data-strength='3'] {
  background: yellowgreen;
  width: 80%;
}

.strength-meter-fill[data-strength='4'] {
  background: green;
  width: 100%;
}

.Password-field {
  margin-bottom: 1px
}

<div class="form-group Password-field" ng-class="{ 'has-error': changepasswordform.password.$error.pattern || (changepasswordform.password.$dirty && changepasswordform.password.$invalid) ? 'error' : '' }">
  <label class="col-md-4 control-label w-alert-form-label" for="password">Password*</label>
  <div class="col-md-4">
    <input type="password" class="form-control ok-password" id="password" name="password" placeholder="Enter Password" ng-required="true" ng-minlength="8" ng-pattern="regex.Password" ng-model="theChangePassword.NewPassword">
    <span ng-show="(theChangePassword.NewPassword == theChangePassword.OldPassword) && changepasswordform.password.$dirty" class="help-block">New Password must differ from old password.</span>
    <span ng-show="changepasswordform.password.$error.pattern && changepasswordform.password.$invalid && changepasswordform.password.$dirty " class="help-block">Please enter a password with at least 8 characters, numbers, special characters and upper case letters. </span>
    <div class="label password-count" ng-class="password.length > 7 ? 'label-success' : 'label-danger'" ng-cloak>{{ password | passwordCount:7 }}</div>
    <div class="strength-meter">
      <div class="strength-meter-fill" data-strength="{{passwordStrength}}"></div>
    </div>
  </div>
</div>

Answer 1

密码数上方的 div 在未隐藏时将其下推。将您的 div 重新定位到消息上方应该修复它:

<div class="form-group Password-field" ng-class="{ 'has-error': changepasswordform.password.$error.pattern || (changepasswordform.password.$dirty && changepasswordform.password.$invalid) ? 'error' : '' }">
                    <label class="col-md-4 control-label w-alert-form-label" for="password">Password*</label>
                    <div class="col-md-4">
                    <input type="password" class="form-control ok-password" id="password" name="password" placeholder="Enter Password" ng-required="true" ng-minlength="8" ng-pattern="regex.Password" ng-model="theChangePassword.NewPassword">
                    <div class="label password-count" ng-class="password.length > 7 ? 'label-success' : 'label-danger'" ng-cloak>{{ password | passwordCount:7 }}</div>
                     <span ng-show="(theChangePassword.NewPassword == theChangePassword.OldPassword) && changepasswordform.password.$dirty" class="help-block">New Password must differ from old password.</span> 
                      <span ng-show="changepasswordform.password.$error.pattern && changepasswordform.password.$invalid && changepasswordform.password.$dirty " class="help-block">Please enter a password with at least 8 characters, numbers, special characters and upper case letters. </span>
                    <div class="strength-meter">
                        <div class="strength-meter-fill" data-strength="{{passwordStrength}}"></div>
                    </div>
                    </div>
                </div>