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

Question

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:

          <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:

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:

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?

Answer 1

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

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