使用复选框切换密码输入（由于安全风险不工作）

Question

我正在尝试删除注册表单中的 "put your password in again to confirm it" 字段。我见过的解决这个问题的设计模式是一个复选框，它会向用户显示密码——这样他们就可以验证它。然而，实施起来似乎很痛苦。

这是我的相关 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');
}
});

使用复选框切换密码输入（由于安全风险不工作）

Toggle password input using a checkbox (not working due to security risks)

html

javascript

passwords

jquery

input