当前位置: 代码迷 >> 综合 >> Bootstrap 写一个表单+内嵌图标
  详细解决方案

Bootstrap 写一个表单+内嵌图标

热度:15   发布时间:2023-10-18 05:58:47.0

使用轻量级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');});}});
});