Show and Hide Password with JavaScript

Show and Hide password Field

In this blog you will read about how you can Show and Hide Password field. JavaScript is used to show and hide password visibility. When filling out a form, there is a password field. The user wants to view the password he typed in. This small function can be added to our website form for a better user experience.

In Short, We update the type of field from password to text

Preview:

Show & Hide password with JavaScript | Code Architects
Show & Hide password with JavaScript | Code Architects

Preview (Show and Hide Password)

HTML Code

Let us first include the <head> files

<title>Show/hide password</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Now let us build the HTML structure for Password field.

<input type="password" autocomplete="off" placeholder="Your password here" class="password" />
<span onclick="togglePass()"><i class="fa fa-eye-slash"></i></span>

Full HTML file looks like

<!DOCTYPE html>
<html>
<head>
    <title>Show/hide password</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container">
        <input type="password" autocomplete="off" placeholder="Your password here" class="password" />
        <span onclick="togglePass()"><i class="fa fa-eye-slash"></i></span>
        <script src="script.js"></script>
    </div>
</body>
</html>

CSS Code

In this project, the CSS code is straightforward. It is uncomplicated and self-explanatory.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap');
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e6ffe6;
	font-family: 'Montserrat', sans-serif;
}
.container {
	border-bottom: 2px solid #292942;
	box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.container:focus-within {
	border-bottom: 2px solid #00c711;
}
.password {
	padding: 8px;
	border: 0;
	width: 200px;
}
.password:focus {
	outline: 0;
}
span {
	float: right;
	background: #fff;
	cursor: pointer;
	padding: 6.5px;
}

JavaScript Code

We create a function which will show and hide password field. The selected options are “password” & “text”.

const passwordEl = document.querySelector(".password");
const eyeButton = document.querySelector(".fa");
let isPass = true;
function togglePass() {
    if (isPass) {
        passwordEl.setAttribute("type", "text");
        eyeButton.classList.remove("fa-eye-slash");
        eyeButton.classList.add("fa-eye");
        isPass = false;
    } else {
        passwordEl.setAttribute("type", "password");
        eyeButton.classList.remove("fa-eye");
        eyeButton.classList.add("fa-eye-slash");
        isPass = true;
    }
}

You can customize the functionality by adding more characters, Having options if the user wants to include numbers, symbols or other characters.

The source code can be found on GitHub. Here’s a link to the live preview.

Read our other from here 👇

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *

five × 1 =