how to show password javascript code example
Example 1: how to make a show password button
function myFunction() {
var x = document.getElementById("*passwordbox-id*");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
Example 2: password visibility toggle
<div class="input-group">
<input type="password" class="form-control pwd" id="login_password" placeholder="" name="password" required>
<span class="input-group-btn" id="eyeSlash">
<button class="btn btn-default reveal" onclick="visibility3()" type="button"><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
</span>
<span class="input-group-btn" id="eyeShow" style="display: none;">
<button class="btn btn-default reveal" onclick="visibility3()" type="button"><i class="fa fa-eye" aria-hidden="true"></i></button>
</span>
</div>
function visibility3() {
var x = document.getElementById('login_password');
if (x.type === 'password') {
x.type = "text";
$('#eyeShow').show();
$('#eyeSlash').hide();
}else {
x.type = "password";
$('#eyeShow').hide();
$('#eyeSlash').show();
}
}
Example 3: how to make password visible in password javascript
<!DOCTYPE html>
<html>
<head>
<title>Toggle Password Visibility</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>Toggle Password Visibility</h1>
<input type="password" name="password" id="password" placeholder="Enter the password">
<i class="far fa-eye" id="togglePassword"></i>
</div>
<script src="js/app.js"></script>
</body>
</html>Code language: HTML, XML (xml)