Exibir ou Ocultar a sua senha com jQuery

## 00-README.md

      
          Raw
        
        
              00-README.md
            
          
    Exibir ou Ocultar a sua senha com jQuery
Códigos referentes ao post Exibir ou Ocultar a sua senha com jQuery
Arquivos

index.php
show_password.js
show_password.scss
show_password.css


## 01-index.php
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Exibir ou Ocultar a sua senha com jQuery</title>
    <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
  </head>
  <body>

    <div id="global-login-form">
      <h2>Login</h2>
      <form id="login-form">
        <ul>
          <li>
            <label>Username</label>
            <input required="required" type="text" name="username" id="username" placeholder="Username" class="form-control" />
          </li>
          <li>
            <label>Password</label>
            <input required="required" type="password" name="password" id="password" placeholder="Password" class="form-control" />
            <button type="button" id="show_password" name="show_password" class="fa fa-eye-slash" aria-hidden="true"></button>
          </li>
          <li class="text-right">
            <button type="submit" name="submit" class="btn btn-primary btn-lg">Submit</button>
          </li>
        </ul>
      </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <!-- AQUI VAI SER APLICADO O NOSSO JQUERY -->
  </body>
</html>

## 02-show_password.js
jQuery(document).ready(function($) {

  $('#show_password').hover(function(e) {
    e.preventDefault();
    if ( $('#password').attr('type') == 'password' ) {
      $('#password').attr('type', 'text');
      $('#show_password').attr('class', 'fa fa-eye');
    } else {
        $('#password').attr('type', 'password');
        $('#show_password').attr('class', 'fa fa-eye-slash');
    }
  });

});

## 03-show_password.scss
#global-login-form{
  width: 50%;
  margin: 0 auto;
  #login-form{
    ul{
      list-style-type: none;
      padding-left: 0;
      li{
        position: relative;
        margin-bottom: 1em;
        button{
          &#show_password{
            position: absolute;
            bottom: 2px;
            right: 0;
            border: none;
            background-color: transparent;
            font-size: 30px;
          }
          &[type=submit]{
            margin-top: 1em;
          }
        }
      }
    }
  }
}

## 04-show_password.css
 #global-login-form {
  width: 50%;
  margin: 0 auto;
}
#global-login-form #login-form ul {
  list-style-type: none;
  padding-left: 0;
}
#global-login-form #login-form ul li {
  position: relative;
  margin-bottom: 1em;
}
#global-login-form #login-form ul li button#show_password {
  position: absolute;
  bottom: 2px;
  right: 0;
  border: none;
  background-color: transparent;
  font-size: 30px;
}
#global-login-form #login-form ul li button[type=submit] {
  margin-top: 1em;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Exibir ou Ocultar a sua senha com jQuery</title>
	<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
	<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
	</head>
	<body>

	<div id="global-login-form">
	<h2>Login</h2>
	<form id="login-form">
	<ul>
	<li>
	<label>Username</label>
	<input required="required" type="text" name="username" id="username" placeholder="Username" class="form-control" />
	</li>
	<li>
	<label>Password</label>
	<input required="required" type="password" name="password" id="password" placeholder="Password" class="form-control" />
	<button type="button" id="show_password" name="show_password" class="fa fa-eye-slash" aria-hidden="true"></button>
	</li>
	<li class="text-right">
	<button type="submit" name="submit" class="btn btn-primary btn-lg">Submit</button>
	</li>
	</ul>
	</form>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<!-- AQUI VAI SER APLICADO O NOSSO JQUERY -->
	</body>
	</html>
	jQuery(document).ready(function($) {

	$('#show_password').hover(function(e) {
	e.preventDefault();
	if ( $('#password').attr('type') == 'password' ) {
	$('#password').attr('type', 'text');
	$('#show_password').attr('class', 'fa fa-eye');
	} else {
	$('#password').attr('type', 'password');
	$('#show_password').attr('class', 'fa fa-eye-slash');
	}
	});

	});
	#global-login-form{
	width: 50%;
	margin: 0 auto;
	#login-form{
	ul{
	list-style-type: none;
	padding-left: 0;
	li{
	position: relative;
	margin-bottom: 1em;
	button{
	&#show_password{
	position: absolute;
	bottom: 2px;
	right: 0;
	border: none;
	background-color: transparent;
	font-size: 30px;
	}
	&[type=submit]{
	margin-top: 1em;
	}
	}
	}
	}
	}
	}
	#global-login-form {
	width: 50%;
	margin: 0 auto;
	}
	#global-login-form #login-form ul {
	list-style-type: none;
	padding-left: 0;
	}
	#global-login-form #login-form ul li {
	position: relative;
	margin-bottom: 1em;
	}
	#global-login-form #login-form ul li button#show_password {
	position: absolute;
	bottom: 2px;
	right: 0;
	border: none;
	background-color: transparent;
	font-size: 30px;
	}
	#global-login-form #login-form ul li button[type=submit] {
	margin-top: 1em;
	}