使用複選框切換密碼輸入（由於安全風險而不工作）

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 https上有密碼字段ebsite（之前我曾經工作過）。有什麼我在這裏失蹤？

Answer 1

如果你曾經聽說過jQuery的使用它，它會easirer

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