Masking

Security Question - Masking (Hide/ SHow)

by Anish_AR

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="wrapper">
PNC Security Questions!!!
<br>
<br>
  <input type="password" id="password">
  <button id="toggleBtn" class="glyphicon glyphicon-eye-open toggler-ico" type="button"></button>
</div>

CSS

.wrapper {
  position: relative;
  width: 100%;
  margin:24px;
}

.toggler-ico {
  border: none;
  background: none;
  padding: 0;
  outline:none;
  width: 15px;
  position: absolute;
  right: 75%;
  top: 70%;
}

JavaScript

var open = 'glyphicon-eye-open';
var close = 'glyphicon-eye-close';
var ele = document.getElementById('password');

document.getElementById('toggleBtn').onclick = function() {
	if( this.classList.contains(open) ) {
  	ele.type="text";
    this.classList.remove(open);
    this.className += ' '+close;
  } else {
  	ele.type="password";
    this.classList.remove(close);
    this.className += ' '+open;
  }
}