Bootstrap 寫一個表單+內嵌圖示
阿新 • • 發佈:2019-02-08
使用輕量級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'); }); } }); });