Introduction about Password show and hide
In the realm of digital interfaces, the simple act of logging in often requires users to input sensitive information, such as passwords, to secure their accounts. However, the conventional practice of displaying these passwords by doing password show and hide feature in plain text can inadvertently compromise user security and diminish the overall experience. Recognizing the significance of user experience and accessibility, concealing passwords during entry has emerged as a crucial design feature across various platforms and applications. This simple yet impactful measure not only enhances security but also fosters a more intuitive and inclusive environment for all users, regardless of their abilities.
At its core, the decision to hide passwords as they’re being entered is rooted in safeguarding sensitive information from prying eyes. In an era where cybersecurity threats loom large, the visibility of passwords poses a substantial risk, especially in public or shared environments. By obscuring passwords from view, whether through asterisks or other visual cues, designers effectively mitigate the chances of unauthorized access and potential breaches. This proactive approach aligns with industry best practices and regulatory standards aimed at bolstering data protection and preserving user privacy.
Beyond security concerns, the practice of hiding passwords underscores a commitment to enhancing user experience and accessibility. For individuals with visual impairments or cognitive disabilities, the visibility of passwords can present significant challenges during the authentication process. Concealing passwords not only simplifies input for these users but also promotes a more inclusive design ethos that prioritizes equal access and usability for all. By implementing features that cater to diverse needs, designers can foster a more welcoming and accommodating digital landscape that empowers every user to navigate with confidence and ease.
The HTML Code (index.html)
We have a simple HTML structure with an input field for entering the password and a span element acting as a button to toggle between showing and hiding the password.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
<title>Password Show & Hide Using Vanilla JavaScript </title>
</head>
<body>
<div class="container">
<div class="input-box">
<input type="password" spellcheck="false" required />
<label for="">Password</label>
<i class="fa-solid fa-eye-slash toggle"></i>
</div>
</div>
<script src="./js.js"></script>
</body>
</html>
The CSS Code (css.css)
Basic styling is provided to make the demo visually appealing. You can customize the styles as per your requirements.
/* Google Font Import - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #252528;
}
.container {
position: relative;
max-width: 440px;
width: 100%;
padding: 20px;
border-radius: 6px;
background-color: #fff;
}
.container .input-box {
position: relative;
height: 65px;
}
.input-box input {
position: absolute;
height: 100%;
width: 100%;
outline: none;
border: 2px solid #ccc;
border-radius: 6px;
font-size: 22px;
padding: 0 35px 0 18px;
transition: all 0.2s linear;
}
input:is(:focus, :valid) {
border-color: #252528;
}
.input-box :is(label, i) {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #999;
transition: all 0.2s linear;
}
.input-box label {
left: 18px;
pointer-events: none;
font-size: 22px;
font-weight: 400;
}
input:is(:focus, :valid) ~ label {
color: #252528;
top: 0;
font-size: 12px;
font-weight: 500;
background-color: #fff;
}
.input-box i {
right: 15px;
cursor: pointer;
font-size: 16px;
}
input:is(:focus, :valid) ~ i {
color: #252528;
}
The JavaScript Code (js.js) of Password Show and Hide
Toggle the font awesome icon class on click from “. fa-eye-slash” to “fa-eye”, and toggle the input type from “password” to “text”.
const toggle = document.querySelector(".toggle"),
input = document.querySelector("input");
toggle.addEventListener("click", () => {
if(input.type === "password") {
input.type = "text";
toggle.classList.replace("fa-eye-slash", "fa-eye");
} else {
input.type = "password";
toggle.classList.replace("fa-eye", "fa-eye-slash");
}
});Conclusion
This tutorial demonstrates a simple way to implement password show and hide functionality using Vanilla JavaScript. You can further enhance this feature by adding animations or additional styling to improve user experience. or simplify it without the label animation.
Check the jQuery Version here
To Learn More About JavaScript Use W3Schools
posted by Emad Zedan on 27 Jan 2024 in Coding, Design, Development, UX/UI Design, Web Design
Leave a Reply