JSFiddle - React, Tailwind, and code Playground

Unmask Password On Focus

by Jennifer Perrin

HTML

<div>
  <h1>Passwords<span> unmask on focus</span></h1>
  <form>
    <input type="password" value="" class="password" placeholder="Enter Password" id="password" />
    <input type="password" value="" class="password" placeholder="Confirm Password" id="confirm" />
  </form>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);

body {
  background: #eee;
  font-family: "Open Sans", Arial, Helvetica;
  margin-top: 50px;
  font-size: 12px;
}
div {
  width: 400px;
  margin: 0 auto;
  text-align: center;
}
h1 {
  font-size: 30px;
  color: #969696;
  text-shadow: 1px 1px 0px #fff;
  font-weight: 100;
}
  h1 span {
    font-size: 14px;
    color: #c8c8c8;
  }
.password {
  border: 1px solid #cccccc;
  border-bottom-color: #fff;
  border-right-color: #fff;
  border-radius: 3px;
  padding: 10px;
  width: 280px;
  margin-bottom: 5px;
  background: #e5e5e5;
  color: #555;
}

JavaScript

$(function() {
    $('.password').focus(function() {
        $('.password').prop('type', 'input');
    });
    $('.password').blur(function() {
        $('.password').prop('type', 'password');
    });
    $('#confirm').keyup(function() {
        var password = $('#password').val();
        var confirm = $(this).val();
        if (password == confirm) {
            $(this).css('background', 'url(http://jenniferperrin.com/blog/wp-content/uploads/2012/11/password.png) no-repeat 270px 9px #e5e5e5');
        } else {
            $(this).css('background', 'url(http://jenniferperrin.com/blog/wp-content/uploads/2012/11/password.png) no-repeat 270px -35px #e5e5e5');
        }
    });
});