Skip to content

Instantly share code, notes, and snippets.

@math2001

math2001/show-password.html

Last active December 11, 2016 04:29
Show Gist options
  • Save math2001/b978483955fd31013fa1342ffc95c819 to your computer and use it in GitHub Desktop.
Save math2001/b978483955fd31013fa1342ffc95c819 to your computer and use it in GitHub Desktop.
Download ZIP
Show password if an input while you're pressing a button automatically added
Raw
show-password.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Input type password</title>
<style type="text/css">
body {
font-family: "Segoe UI";
color: #333;
}
.body {
width: 50%;
margin: auto;
}
input {
padding: 10px;
font-family: Inconsolata, consolas, Monaco, monospace;
}
.show-password {
border-color: transparent;
border-style: solid;
border-top-color: transparent;
border-width: 4px;
color: transparent;
display: inline-block;
height: 20px;
left: -30px;
position: relative;
top: 5px;
transition: all .2s;
vertical-align: middle;
width: 20px;
}
.show-password::after {
background-color: #34495e;
border-radius: 7px;
content: "";
display: block;
height: 8px;
left: 6px;
opacity: 0.5;
position: relative;
top: 2px;
transition: all .2s;
width: 8px;
}
.show-password:hover {
border-radius: 20px;
border-top-color: #34495e;
}
.show-password:hover::after {
opacity: 1;
}
</style>
</head>
<body>
<div class="body">
<label for="pass">Your password</label>: <input type="password" id="pass" placeholder="Your password" value="tower&amp;sport-voila">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$.passwordButtonViewer = function () {
$('input[type="password"]').after($('<span></span>').addClass('show-password'));
funcData = {}
funcData.$shownPasswordInput = null;
$(document.body).on('mousedown', '.show-password', function () {
funcData.$shownPasswordInput = $(this).prev('input[type=password]').attr('type', 'text');
})
$(window).bind('mouseup', function () {
if (funcData.$shownPasswordInput) {
funcData.$shownPasswordInput.attr('type', 'password');
funcData.$shownPasswordInput = null;
}
})
}
$.passwordButtonViewer()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment