jQuery 顯示 input 輸入的密碼!

HTML密碼框程式碼:

<div class="form-group">
    <label for="inputPassword" class="sr-only"></label>
 <input type="password" name="password" id="inputPassword" class="form-control"  placeholder="密碼" required>
    <label onchange="show_pwd()" > <input type="checkbox"> 顯示密碼</label>
</div>

js程式碼:

<script type="text/javascript">
    function show_pwd(){
  if($("#inputPassword").attr("type") == "password"){
            $("#inputPassword").attr("type","text");   // 改變input的屬即可實現
  } else {
            $("#inputPassword").attr("type","password");
        }
    }
</script>

HTML密碼框程式碼:

<div class="form-group">
    <label for="inputPassword" class="sr-only"></label>
 <input type="password" name="password" id="inputPassword" class="form-control"  placeholder="密碼" required>
    <i onclick="show_pwd()" id="show-pass" class="fa fa-eye-slash" style="position: absolute;top: 30%;right: 5%"></i>
</div>

js程式碼:

function show_pwd(){
            if($("#inputPassword").attr("type") == "password"){
                $("#inputPassword").attr("type","text");    // 改變input的屬即可實現
                $("#show-pass").removeClass("fa-eye-slash");
                $("#show-pass").addClass("fa-eye");
            }else {
                $("#inputPassword").attr("type","password");
                $("#show-pass").removeClass("fa-eye");
                $("#show-pass").addClass("fa-eye-slash");
            }
        }

本作品採用《CC 協議》，轉載必須註明作者和本文連結