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