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

I'm trying to get rid of the "put your password in again to confirm it" field in my sign up form. The design pattern I've seen to get around this is a checkbox which will reveal the password to the user - so they can verify it. However, implementing it seems to be a pain.

我正试图在我的注册表单中删除“再次输入密码以确认它”字段。我看到的设计模式是一个复选框,它会向用户显示密码 - 因此他们可以验证它。然而,实施它似乎是一种痛苦。

Here's my relevant html:

这是我的相关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>

And the accompanying javascript:

以及随附的javascript:

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

However, when I try it in firefox, I get the following console error:

但是,当我在firefox中尝试它时,我收到以下控制台错误:

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

The error is a little cryptic seeing as the issue isn't with having a password field on a non-https website (I had it working before). Is there something I'm missing here?

这个错误有点神秘,因为问题不在于非https网站上有密码字段(我之前有过工作)。这里有什么我想念的吗?

1 个解决方案

#1

If you have ever heard about jQuery use it, it will be easirer

如果你曾经听说过jQuery使用它,它会更容易

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