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:
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:wght@800&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 👇
