Created
February 16, 2017 17:04
-
-
Save chrdesigner/bd19478cb12ac7643e9100baee86f74e to your computer and use it in GitHub Desktop.
Git List - Exibir ou Ocultar a sua senha com jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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; | |
} | |
} | |
} | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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