實現密碼點擊顯現隱藏功能

html

 <label >密碼</label>
        <div class="input-group input-group-lg">
            <span class="input-group-addon" id="sizing-addon2"><span class="glyphicon glyphicon-eye-close" id="iconPassword" οnclick="viewPassword()"></span></span>
            <input type="password" class="form-control"  name="password"  id='password' placeholder="請輸入密碼" aria-describedby="sizing-addon1">
        </div>

js基於bootstarp框架

function viewPassword() {
    var password=$("#password").attr("type");
    if (password == "password"){
        $("#password").attr("type","text");
        $("#iconPassword").removeClass("glyphicon-eye-close");
        $("#iconPassword").addClass("glyphicon-eye-open");
    }else{
        $("#password").attr("type","password");
        $("#iconPassword").removeClass("glyphicon-eye-open");
        $("#iconPassword").addClass("glyphicon-eye-close");
    }

}


基於<i>+圖片
html
   <i  οnclick="passwordView()" id="iconPassword"></i>
  <input type="password" class="form-control " name="mpassword"  id="password" placeholder="請輸入密碼"/>


function passwordView() {
    var password=$("#password").attr("type")
    if (password == "password"){
        $("#password").attr("type","text");
        $("#iconPassword").css("background","url(image/eye-open.png)no-repeat");
        $("#iconPassword").css("background-size","10% 10%");
    }else{
        $("#password").attr("type","password");
        $("#iconPassword").css("background","url(image/eye-close.png)no-repeat");
        $("#iconPassword").css("background-size","10% 10%");
    }
}