使用复选框切换密码输入（由于安全风险而无法使用）

Question

我正在尝试删除注册表单中的“再次输入密码以确认密码”字段。我见过的解决这个问题的设计模式是一个复选框，它将向用户显示密码 - 这样他们就可以验证它。但是，实施它似乎很痛苦。

这是我的相关 html：

          <form name="signup">
            <div class="form-group">
              <input id="usernameInput" class="form-control" placeholder="username">
            </div>
            <div class="form-group">
              <input type="email" id="emailInput" class="form-control" placeholder="email">
            </div>
            <div class="form-group">
              <input type="password" name="passwordInput" class="form-control" placeholder="password">
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" name="show-pass" value='1' onchange="showPass()"> Show password
              </label>
            </div>
            <button type="submit" class="btn btn-info btn-lg">Sign Up</button>
            <a href="#" class="btn btn-primary btn-lg owl-next" role="button">Back</a>
          </form>

以及随附的 javascript：

function showPass() {
          document.signup.passwordInput.type=(document.signup.show-pass.value=(document.signup.show-pass.value==1)?'-1':'1')=='1'?'text':'password';
      }

但是，当我在 firefox 中尝试时，我收到以下控制台错误：

Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.

这个错误有点神秘，因为问题不在于非 https 网站上的密码字段（我之前有它工作过）。我这里有什么遗漏吗？

Answer 1

如果你听说过 jQuery 使用它，它会更容易

$('#id-of-checkbox').change(function(){
 if($(this).is(':checked')){
  $('.password-fields').attr('type','text');
} else {
 $('.password-fields').attr('type','password');
}
});