Creating a Custom Password Textbox in JavaScript

A custom password textbox in JavaScript is a user interface component that provides a custom and more secure way for users to enter passwords. Typically, a password textbox in HTML displays the entered characters as plain text, which makes it vulnerable to shoulder surfing attacks.

To create a custom password textbox, developers can use JavaScript to modify the default behavior of the HTML password input. For instance, they can prevent the characters from being displayed as plain text and instead mask them with asterisks or circles. They can also add additional features such as password strength validation, auto-suggest passwords, and password visibility toggling.

One of the benefits of using a custom password textbox is that it provides a more secure way for users to enter passwords since the characters are hidden from view. This can prevent potential attackers from stealing the password by looking over the user's shoulder

Overall, a custom password textbox in JavaScript provides developers with more control over the password input user interface, making it more secure and user-friendly.

Source Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <h2>Custom Password Text Box</h2>
    <div class="input-container">
      <input type="password" />
      <i class="fa fa-eye" id="toggleBtn"></i>
    </div>
    <script src="js/script.js"></script>
  </body>
</html>

css/style.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  place-content: center;
}
h2 {
  font-weight: 600;
  text-transform: uppercase;
  color: #333;
  margin-bottom: 20px;
}
.input-container {
  width: 300px;
  border: 1px solid #aaa;
  border-radius: 3px;
  display: flex;
  align-items: center;
}

.input-container input {
  padding: 10px;
  width: 100%;
  font-size: 16px;
  border: 0;
  outline: none;
  color: #333;
}

.input-container i {
  padding: 10px;
  color: #aaa;
  cursor: pointer;
}

js/script.js

const toggleBtn = document.querySelector("#toggleBtn");
const input = document.querySelector(".input-container input");

let password = true;
toggleBtn.addEventListener("click", function () {
  if (password) {
    input.setAttribute("type", "text");
    toggleBtn.classList.remove("fa-eye");
    toggleBtn.classList.add("fa-eye-slash");
    password = false;
  } else {
    input.setAttribute("type", "password");
    toggleBtn.classList.remove("fa-eye-slash");
    toggleBtn.classList.add("fa-eye");
    password = true;
  }
});

This code creates a custom password textbox in JavaScript that allows the user to toggle the visibility of the password by clicking a button.

The first two lines of the code select the toggle button and the password input element from the HTML document.

The next two lines create a boolean variable password and set its initial value to true. This variable is used to keep track of whether the password is currently visible or hidden.

The addEventListener function is used to add a click event listener to the toggle button. When the button is clicked, the function inside the listener is executed.

Inside the function, an if-else statement checks the value of the password variable. If it is true, the input type is changed to text, which displays the password in plain text, and the icon on the toggle button is changed to indicate that the password is now visible. The password variable is then set to false.

If the password variable is false, the input type is changed back to password, which hides the password characters, and the icon on the toggle button is changed to indicate that the password is now hidden. The password variable is then set to true.

Overall, this code provides a simple and convenient way for users to toggle the visibility of their passwords in a custom password textbox.

Output

Live Preview