Skip to content

Instantly share code, notes, and snippets.

@danwakefield

danwakefield/index.html

Last active December 22, 2015 15:29
Show Gist options
  • Save danwakefield/de2a73674d7a6dd2cb07 to your computer and use it in GitHub Desktop.
Save danwakefield/de2a73674d7a6dd2cb07 to your computer and use it in GitHub Desktop.
Download ZIP
Password toggle with FontAwesome
Raw
index.html
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script>
var createPasswordToggle = function(toggleTriggerId, passwordId) {
var changeInput = function(old, newType) {
// http://stackoverflow.com/a/9094151
var n = document.createElement('input');
n.type = newType;
if(old.size) n.size = old.size;
if(old.value) n.value = old.value;
if(old.name) n.name = old.name;
if(old.id) n.id = old.id;
if(old.className) n.className = old.className;
old.parentNode.replaceChild(n, old);
};
var showPassword = function(e) {
return function() {
e.classList.add('fa-eye-slash');
e.classList.remove('fa-eye');
e.onclick = hidePassword(e);
changeInput(document.getElementById(passwordId), 'text');
};
};
var hidePassword = function(e) {
return function() {
e.classList.add('fa-eye');
e.classList.remove('fa-eye-slash');
e.onclick = showPassword(e);
changeInput(document.getElementById(passwordId), 'password');
};
};
var pwdToggle = document.getElementById(toggleTriggerId);
pwdToggle.onclick = showPassword(pwdToggle);
};
createPasswordToggle('toggle-password', 'password');
</script>
</head>
<body>
<div>
<label for="password">Password</label>
<input type="password" id="password" placeholder="Password">
<i class="fa fa-eye fa-lg" id="toggle-password"></i>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment