使用轻量级jquery框架+css+div+Bootstrap亲和移动端框架
HTML:
<div class = 'form-group has-feedback'><div class = 'col-lg-3'><label for = 'psd' >密码: </label><!--<button type = 'button' id = 'spsd' class = 'form-control-feedback'></button>--><span class="cover"></span><span class="glyphicon glyphicon-eye-close form-control-feedback" id = 'spsd'></span><span class="glyphicon glyphicon-eye-open form-control-feedback" id = 'spsd2' ></span><input type = 'password' name = 'gyl_admin_password' id = 'psd' class = 'form-control fc-clear' placeholder = '请输入管理员密码' ></div></div>
CSS:#spsd{cursor:pointer;z-index:999999999999;color:white;}.cover{display:inline-block;border:0px;width:30px;height:30px;position:absolute;right:18px;top:27px;z-index:100;cursor:pointer;}#spsd2{display:none;color: rgb(116, 255, 255);}
jquery:$(document).ready(function()
{var count = 0;$('.cover').click(function(){count += 1;//alert('test');if(count % 2 == 0){$('#spsd2').hide(500);$('#spsd').show(500,function(){$('#psd').attr('type','password');});}else{$('#spsd').hide(500);$('#spsd2').show(500,function(){$('#psd').attr('type','text');});}});
});