javascript - 使用复选框切换密码输入(由于安全风险而不起作用)

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');
}
});