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%");
}
}