'html toggle visibility password inside the input
I'm learning html/css, I'm doing a registration form and I'd like to put the eye toggle to show the password inside the password input field, there is a way to do it to keep the scalability in the different resolutions? Searching online I think that I have to put them in a container and then use css but if I try to do it changing the container in css the whole my form breaks...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index Registration</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel= "stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/style.css">
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 col-9">
<div class="login-wrap py-3 px-4">
<h2 style="color: #FFF; text-align: center;" class="text-uppercase text-center mb-5">Create new Account</h2>
<form class="form-sigin" action="../home/index.php" name="formRegistration" id="formRegistration" method="post">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="firstNameNewUser" style="margin-left: 0px;">First Name</label>
<input type="text" name ="firstNameNewUser" id="firstNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="lastNameNewUser">Last Name</label>
<input type="text" name ="lastNameNewUser" id="lastNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
</div>
<div class="control mb-4">
<label class="form-label" for="nickNewUser">Your Nickname</label>
<input type="text" name ="nickNewUser" id="nickNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="emailNewUser">Your Email</label>
<input type="email" name ="emailNewUser" id="emailNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="passwordNewUser">Password</label>
<input type="password" name ="passwordNewUser" id="passwordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
<i> <span class="material-icons">visibility</span> </i>
</div>
<div class="control mb-4">
<label class="form-label" for="rPasswordNewUser">Repeat your password</label>
<div class="parent inline-flex-parent">
<div class="child">
<input type="password" name ="rPasswordNewUser" id="rPasswordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="child">
<i> <span class="material-icons">visibility</span> </i>
</div>
</div>
</div>
<div class="form-check" id="form-checkbox">
<input
class="form-check-input me-2"
type="checkbox"
value=""
name="checkboxterms"
id="checkboxterms"
/>
<label class="form-check-label" for="checkboxterms" name="checkboxtermslabel" id="checkboxtermslabel">
I agree all statements in <a href="#!">Terms of service</a>
</label>
</div>
<p id="spacing"> </p>
<div class="d-flex justify-content-center">
<div style="clear:both;"></div>
<button type="submit" id = "registerButton" name="registerButton" class="btn btn-primary rounded submit p-2 px-4">Register</button>
</div>
<p class="text-center text-muted mt-5 mb-0">Have already an account?
<a href="../login/index.php" class="text-white"><u>Login here</u></a>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</body>EDIT: the current password code you see are just some tests that I'm doing, If I don't put the passw input field and the inside a div, then they will be put one over the other, so I created a div to put them side by side... by also like this, if the resolution change then the eye icon will not be in the right place
Solution 1:[1]
This is how I implement pw visibility. As far as scalability, if you use Bootstrap's sizing classes it should all scale well. I've had no issues moving this between assorted screen sizes.
Addendum : centering the Eye
I modified the second password field. To properly vertically center it I had to alter the html. Compare against the first password HTML.
In particular:
- wrapped the "eye" containing div and the input in it's own
relativediv. (position-relativemoved from outerdiv.control - Added Bootstrap class
h-100to the "eye"div - Added bootstrap class
align-middleto the "eye" and - Created an actual rule for .pw-toggle that sets
height: 1rem;so thatalign-middlecenters correctly.
$(function() {
$("span.pw-toggle, span.pw-toggle2").click(function() {
var $pwField = $($(this).data().target);
var TorP = $pwField.attr('type') == 'password' ? 'text' : 'password';
$(this).text(TorP === "password" ? "visibility" : "visibility_off")
$pwField.attr('type', TorP);
});
});span[data-target] {
cursor: pointer;
}
.pw-toggle {
height: 1rem;
}<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 col-9">
<div class="login-wrap py-3 px-4">
<h2 style="color: #FFF; text-align: center;" class="text-uppercase text-center mb-5">Create new Account</h2>
<form class="form-sigin" action="../home/index.php" name="formRegistration" id="formRegistration" method="post">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="firstNameNewUser" style="margin-left: 0px;">First Name</label>
<input type="text" name="firstNameNewUser" id="firstNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="lastNameNewUser">Last Name</label>
<input type="text" name="lastNameNewUser" id="lastNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
</div>
<div class="control mb-4">
<label class="form-label" for="nickNewUser">Your Nickname</label>
<input type="text" name="nickNewUser" id="nickNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="emailNewUser">Your Email</label>
<input type="email" name="emailNewUser" id="emailNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4 position-relative">
<label class="form-label" for="passwordNewUser">Password</label>
<div class="position-absolute end-0 me-1">
<span data-target="#passwordNewUser" class="pw-toggle material-icons pr-1">visibility</span>
</div>
<input type="password" name="passwordNewUser" id="passwordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="rPasswordNewUser">Repeat your password</label>
<div class="position-relative">
<div class="position-absolute end-0 me-1 h-100">
<span data-target="#rPasswordNewUser" class="pw-toggle material-icons pr-1 align-middle">visibility</span>
</div>
<input type="password" name="rPasswordNewUser" id="rPasswordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
<!-- Just for fun, the eye as a Bootstrap input
addon is much cleaner -->
<div clas="control mb-4">
<div class="input-group">
<input type="password" name="r2PasswordNewUser" id="r2PasswordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
<span class="input-group-text">
<span data-target="#r2PasswordNewUser" class="pw-toggle2 material-icons">visibility</span>
</span>
</div>
</div>
<div class="form-check" id="form-checkbox">
<input class="form-check-input me-2" type="checkbox" value="" name="checkboxterms" id="checkboxterms" />
<label class="form-check-label" for="checkboxterms" name="checkboxtermslabel" id="checkboxtermslabel">
I agree all statements in <a href="#!">Terms of service</a>
</label>
</div>
<p id="spacing"> </p>
<div class="d-flex justify-content-center">
<div style="clear:both;"></div>
<button type="submit" id="registerButton" name="registerButton" class="btn btn-primary rounded submit p-2 px-4">Register</button>
</div>
<p class="text-center text-muted mt-5 mb-0">Have already an account?
<a href="../login/index.php" class="text-white"><u>Login here</u></a>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</body>Solution 2:[2]
This is how you would implement that functionality with JavaScript. We grab the eye ball icon and the two password fields. Then, loop through the eyeBall and add an event listener to it. It checks whether the type attribute is password or text. If it is password, it changes it to text.
let eyeBall = document.getElementsByClassName('viewPass');
let passInput = document.getElementsByClassName('passwordInput');
let passField = document.getElementById('passwordNewUser');
function change_visibility($type) {
for(let field of passInput) {
field.setAttribute('type', $type);
}
}
for(let eye of eyeBall) {
eye.addEventListener('click', function() {
if (passField.getAttribute('type') == 'password') {
change_visibility('text');
} else {
change_visibility('password');
}
});
}.viewPass {
cursor: pointer;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index Registration</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel= "stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/style.css">
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 col-9">
<div class="login-wrap py-3 px-4">
<h2 style="color: #FFF; text-align: center;" class="text-uppercase text-center mb-5">Create new Account</h2>
<form class="form-sigin" action="../home/index.php" name="formRegistration" id="formRegistration" method="post">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="firstNameNewUser" style="margin-left: 0px;">First Name</label>
<input type="text" name ="firstNameNewUser" id="firstNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="lastNameNewUser">Last Name</label>
<input type="text" name ="lastNameNewUser" id="lastNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
</div>
<div class="control mb-4">
<label class="form-label" for="nickNewUser">Your Nickname</label>
<input type="text" name ="nickNewUser" id="nickNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="emailNewUser">Your Email</label>
<input type="email" name ="emailNewUser" id="emailNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="passwordNewUser">Password</label>
<input class="passwordInput" type="password" name ="passwordNewUser" id="passwordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
<i class="viewPass"> <span class="material-icons">visibility</span> </i>
</div>
<div class="control mb-4">
<label class="form-label" for="rPasswordNewUser">Repeat your password</label>
<div class="parent inline-flex-parent">
<div class="child">
<input class="passwordInput" type="password" name ="rPasswordNewUser" id="rPasswordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="child">
<i class="viewPass"> <span class="material-icons">visibility</span> </i>
</div>
</div>
</div>
<div class="form-check" id="form-checkbox">
<input
class="form-check-input me-2"
type="checkbox"
value=""
name="checkboxterms"
id="checkboxterms"
/>
<label class="form-check-label" for="checkboxterms" name="checkboxtermslabel" id="checkboxtermslabel">
I agree all statements in <a href="#!">Terms of service</a>
</label>
</div>
<p id="spacing"> </p>
<div class="d-flex justify-content-center">
<div style="clear:both;"></div>
<button type="submit" id = "registerButton" name="registerButton" class="btn btn-primary rounded submit p-2 px-4">Register</button>
</div>
<p class="text-center text-muted mt-5 mb-0">Have already an account?
<a href="../login/index.php" class="text-white"><u>Login here</u></a>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Nimantha |