Show-Hide Password Toggle in JavaScript (Free Code)

Here is an example of how to show and hide a password in JavaScript:

var state = false;

function toggle() {
if (state) {
document.getElementById("password").setAttribute("type", "password");
state = false;
} else {
document.getElementById("password").setAttribute("type", "text");
state = true;
}
}

In this example, we use a state variable to keep track of whether the password is currently shown or hidden. The toggle function changes the type attribute of the password input field with an ID of “password” from “password” to “text” or vice versa, depending on the current state.

The state variable is updated after each toggle to keep track of the current state. To use this in a HTML page, you would need to add an input field with the id attribute set to “password” and a button or other element that calls the toggle function when it is clicked.

Here’s a complete HTML, CSS, and JavaScript example of how to create a toggle button to show and hide a password input field:

<div>
<input type="password" id="password">
<button id="toggleBtn" onclick="toggle()">Show </button>
</div>

var state = false;

function toggle() {
if (state) {
document.getElementById("password").setAttribute("type", "password");
document.getElementById("toggleBtn").innerHTML = "Show";
state = false;
} else {
document.getElementById("password").setAttribute("type", "text");
document.getElementById("toggleBtn").innerHTML = "Hide";
state = true;
}
}

div {
display: flex;
align-items: center;
}

input[type="password"] {
margin-right: 10px;
}

button {
background-color: lightgray;
border: none;
padding: 5px 10px;
}

This will create a password input field with a toggle button next to it. The JavaScript function toggle changes the type attribute of the password input field from “password” to “text” or vice versa, depending on the current state.

The text on the button is updated to reflect the current state (either “Show” or “Hide”). The CSS is optional and is used to style the appearance of the input field and button.

Here’s an example of how to show and hide a password input field using an eye icon in HTML:

<div class="password-container">
<input type="password" id="password">
<span class="show-password" onclick="toggle()">
<i class="fas fa-eye" id="eye"></i>
</span>
</div>

var state = false;

function toggle() {
if (state) {
document.getElementById("password").setAttribute("type", "password");
document.getElementById("eye").classList.remove("fa-eye-slash");
document.getElementById("eye").classList.add("fa-eye");
state = false;
} else {
document.getElementById("password").setAttribute("type", "text");
document.getElementById("eye").classList.remove("fa-eye");
document.getElementById("eye").classList.add("fa-eye-slash");
state = true;
}
}

.password-container {
position: relative;
}

input[type="password"] {
padding-right: 40px;
}

.show-password {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}

.fa-eye, .fa-eye-slash {
font-size: 18px;
}

This example uses Font Awesome icons to display an eye icon to toggle the visibility of the password. The JavaScript toggle function changes the type attribute of the password input field and updates the eye icon accordingly.

The CSS is optional and is used to position the eye icon and style the appearance of the input field. To use this example, you need to include Font Awesome icons in your project.