PROWAREtech
JavaScript: Reveal and Hide Password in HTML Textbox
Show or hide the password in HTML textboxes.
Most of the work is done by the CSS but a little JavaScript is needed to complete this function. Convert images to base 64 strings.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Show/Hide Textbox Password</title>
<style>
body {
background-color: #ccc;
}
main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hidepwd {
padding: 0 30px 0 0;
margin: 0;
cursor: pointer;
width: 150px;
line-height: 30px;
height: 30px;
border: 2px solid darkcyan;
outline: none;
box-sizing: border-box; /* optional */
}
/*
CONVERT IMAGES TO BASE 64 STRINGS:
http://www.prowaretech.com/articles/current/tools/convert-image-to-base64
*/
.hidepwd[type="password"] { /* Remember, SVG's scale to any size without pixelation */
background: white url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjU2MXB4IiBoZWlnaHQ9IjU2MXB4IiB2aWV3Qm94PSIwIDAgNTYxIDU2MSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTYxIDU2MTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGcgaWQ9InZpc2liaWxpdHkiPg0KCQk8cGF0aCBkPSJNMjgwLjUsODkuMjVDMTUzLDg5LjI1LDQzLjM1LDE2OC4zLDAsMjgwLjVjNDMuMzUsMTEyLjIsMTUzLDE5MS4yNSwyODAuNSwxOTEuMjVTNTE3LjY1LDM5Mi43LDU2MSwyODAuNQ0KCQkJQzUxNy42NSwxNjguMyw0MDgsODkuMjUsMjgwLjUsODkuMjV6IE0yODAuNSw0MDhDMjA5LjEsNDA4LDE1MywzNTEuOSwxNTMsMjgwLjVjMC03MS40LDU2LjEtMTI3LjUsMTI3LjUtMTI3LjUNCgkJCWM3MS40LDAsMTI3LjUsNTYuMSwxMjcuNSwxMjcuNUM0MDgsMzUxLjksMzUxLjksNDA4LDI4MC41LDQwOHogTTI4MC41LDIwNGMtNDMuMzUsMC03Ni41LDMzLjE1LTc2LjUsNzYuNQ0KCQkJYzAsNDMuMzUsMzMuMTUsNzYuNSw3Ni41LDc2LjVjNDMuMzUsMCw3Ni41LTMzLjE1LDc2LjUtNzYuNUMzNTcsMjM3LjE1LDMyMy44NSwyMDQsMjgwLjUsMjA0eiIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K) no-repeat;
background-size: 25px 25px;
background-position: 100% 50%;
}
.hidepwd[type="text"] {
background: white url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDY5LjQ0IDQ2OS40NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDY5LjQ0IDQ2OS40NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTIzMS4xNDcsMTYwLjM3M2w2Ny4yLDY3LjJsMC4zMi0zLjUyYzAtMzUuMzA3LTI4LjY5My02NC02NC02NEwyMzEuMTQ3LDE2MC4zNzN6Ii8+DQoJCQk8cGF0aCBkPSJNMjM0LjY2NywxMTcuMzg3YzU4Ljg4LDAsMTA2LjY2Nyw0Ny43ODcsMTA2LjY2NywxMDYuNjY3YzAsMTMuNzYtMi43NzMsMjYuODgtNy41NzMsMzguOTMzbDYyLjQsNjIuNA0KCQkJCWMzMi4yMTMtMjYuODgsNTcuNi02MS42NTMsNzMuMjgtMTAxLjMzM2MtMzcuMDEzLTkzLjY1My0xMjgtMTYwLTIzNC43NzMtMTYwYy0yOS44NjcsMC01OC40NTMsNS4zMzMtODUuMDEzLDE0LjkzM2w0Ni4wOCw0NS45NzMNCgkJCQlDMjA3Ljc4NywxMjAuMjY3LDIyMC45MDcsMTE3LjM4NywyMzQuNjY3LDExNy4zODd6Ii8+DQoJCQk8cGF0aCBkPSJNMjEuMzMzLDU5LjI1M2w0OC42NCw0OC42NGw5LjcwNyw5LjcwN0M0NC40OCwxNDUuMTIsMTYuNjQsMTgxLjcwNywwLDIyNC4wNTNjMzYuOTA3LDkzLjY1MywxMjgsMTYwLDIzNC42NjcsMTYwDQoJCQkJYzMzLjA2NywwLDY0LjY0LTYuNCw5My41NDctMTguMDI3bDkuMDY3LDkuMDY3bDYyLjE4Nyw2Mi4yOTNsMjcuMi0yNy4wOTNMNDguNTMzLDMyLjA1M0wyMS4zMzMsNTkuMjUzeiBNMTM5LjMwNywxNzcuMTINCgkJCQlsMzIuOTYsMzIuOTZjLTAuOTYsNC41ODctMS42LDkuMTczLTEuNiwxMy45NzNjMCwzNS4zMDcsMjguNjkzLDY0LDY0LDY0YzQuOCwwLDkuMzg3LTAuNjQsMTMuODY3LTEuNmwzMi45NiwzMi45Ng0KCQkJCWMtMTQuMTg3LDcuMDQtMjkuOTczLDExLjMwNy00Ni44MjcsMTEuMzA3QzE3NS43ODcsMzMwLjcyLDEyOCwyODIuOTMzLDEyOCwyMjQuMDUzQzEyOCwyMDcuMiwxMzIuMjY3LDE5MS40MTMsMTM5LjMwNywxNzcuMTJ6Ig0KCQkJCS8+DQoJCTwvZz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==) no-repeat;
background-size: 25px 25px;
background-position: 100% 50%;
}
</style>
<script type="text/javascript">
function passwordShowHide() {
if(event.offsetX > event.target.offsetWidth - 30) { /* 30: this constant will vary with each implementation (see padding) */
if(event.target.type == "password") {
event.target.type = "text";
}
else {
event.target.type = "password";
}
}
}
</script>
</head>
<body>
<main>
<input class="hidepwd" type="password" name="password" autocomplete="off" onclick="passwordShowHide();" required />
</main>
</body>
</html>
Coding Video
Comment
