Bootstrap Snippet Windows 8 Style Password Reveal using HTML Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">    
  <div class="text-center">           
      <div class="col-lg-6">
        <h2>Windows 8 Style Password Reveal</h2> 
        <div class="input-group">
          <input type="password" class="form-control pwd" value="iamapassword">
          <span class="input-group-btn">
            <button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
          </span>          
        </div>
      </div>
  </div>  
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
$(".reveal").mousedown(function() {
    $(".pwd").replaceWith($('.pwd').clone().attr('type', 'text'));
})
.mouseup(function() {
    $(".pwd").replaceWith($('.pwd').clone().attr('type', 'password'));
})
.mouseout(function() {
    $(".pwd").replaceWith($('.pwd').clone().attr('type', 'password'));
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Windows 8 Style Password Reveal"
Bootstrap 3.1.0 Snippet by stickerboy

Related: See More

Questions / Comments:

"Windows 8 Style Password Reveal" Bootstrap 3.1.0 Snippet by stickerboy

Related: See More

Questions / Comments:

"Windows 8 Style Password Reveal"
Bootstrap 3.1.0 Snippet by stickerboy