Instantly share code, notes, and snippets.

Embed
What would you like to do?
Git List - Exibir ou Ocultar a sua senha com jQuery
<!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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment