Javascript jQuery/CSS-使用zxcvbn.js和backspace的密码强度计

我使用

zxcvbn.js

创建了一个密码强度表。您可以在此处演示：

（更新：修订工作笔：）

当我输入密码时，它似乎工作正常，即根据zxcvbn确定的密码强度，仪表会适当地增长和更改颜色。当退格-从密码中删除字符时会出现问题。它最初也是有效的，直到我读到最后一两个字符。此时，仪表停止下降并保持部分可见，这可能相当于密码强度为10%，即使百分比强度为0。（为了验证，有一个console.log语句将当前密码强度百分比输出到控制台。）

因此，要么我在密码输入控件中确定值的方式有问题，要么我需要处理向上键事件的一些奇怪或不同的方式，无论是在一般情况下还是在涉及的键是退格键（Mac上的delete键）时

有什么想法吗？谢谢

HTML

<form novalidate="novalidate" class="simple_form new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" />
  <div id="user-prefs-password-new-input-wrapper" class="form-group password optional user_password user-prefs-input-wrapper">
    <label class="password optional control-label" for="user-prefs-password-new-input">New Password</label>
    <input id="user-prefs-password-new-input" class="password optional user-prefs-input form-control" type="password" name="user[password]" />
  </div>
  <div id='user-prefs-password-new-strength-meter'></div>
  <div id='user-prefs-email-password-form-submit-btn-wrapper'>
    <input type="submit" name="commit" value="Update" id="user-prefs-email-password-form-submit-btn" class="btn-success btn-sm btn-submit" />
  </div>
</form>

---

您能否尝试完全删除

背景图像

，如下所示：

if ($(input).val() === '') {
  bar.style.backgroundImage = 'none';
} else {
  ...
}

---

在

开关箱

之后添加

if语句

  case 4:
              if (strengthPercentage <= 99) {
                bar.style.backgroundImage = 'linear-gradient(to right, #d30202 25%, #f07906 50%, #f3f304 66%, #57ad02 83%, #02ad02 ' + strengthPercentage + '%, #ffffff ' + (strengthPercentage + 1) + '%)';
              } else {
                bar.style.backgroundImage = 'linear-gradient(to right, #d30202 25%, #f07906 50%, #f3f304 66%, #57ad02 83%, #02ad02 100%)';
              };
          };
        };
//Add this below if statement,
         if (strengthPercentage <= 10){
              bar.style.backgroundImage = "none"; 
         }
      });

案例4：
如果（strengthPercentage或，您可以在输入为空时修复此问题

bar.style.backgroundImage='线性渐变（向右，#ffffff 100%，#ffffff 100%）“；
Genius.谢谢！Sheesh，我昨天就应该发布这个问题，这样就省去了很多麻烦。如果你只需按住backspace键删除整个密码，它还解决了我遇到的电表更新不正确的问题。你的解决方案和我的解决方案有什么区别oing？为什么全白色渐变不能完成同样的任务？可能与css中需要
清除
规则有关…但似乎只需删除背景就可以了。这也很有效！Robin的解决方案最终解决了我在这方面遇到的另一个问题，我没有将其作为问题的一部分（请参阅我对罗宾回答的评论）。感谢您如此快速地给出了有效的解决方案。干杯！欢迎@eggroll，很高兴您找到了问题的解决方案。
if ($(input).val() === '') {
  bar.style.backgroundImage = 'none';
} else {
  ...
}

  case 4:
              if (strengthPercentage <= 99) {
                bar.style.backgroundImage = 'linear-gradient(to right, #d30202 25%, #f07906 50%, #f3f304 66%, #57ad02 83%, #02ad02 ' + strengthPercentage + '%, #ffffff ' + (strengthPercentage + 1) + '%)';
              } else {
                bar.style.backgroundImage = 'linear-gradient(to right, #d30202 25%, #f07906 50%, #f3f304 66%, #57ad02 83%, #02ad02 100%)';
              };
          };
        };
//Add this below if statement,
         if (strengthPercentage <= 10){
              bar.style.backgroundImage = "none"; 
         }
      });