articles » current » javascript » reveal-or-hide-password-in-html-textbox

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

https://youtu.be/d1oF5qHl61U


This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE