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 >
<div >
<div >
<div >
<div >
<h2 style="color: #FFF; text-align: center;" >Create new Account</h2>
<form action="../home/index.php" name="formRegistration" id="formRegistration" method="post">
<div >
<div >
<div >
<label for="firstNameNewUser" style="margin-left: 0px;">First Name</label>
<input type="text" name ="firstNameNewUser" id="firstNameNewUser" size="40" maxlength="40" required autofocus/>
</div>
</div>
<div >
<div >
<label for="lastNameNewUser">Last Name</label>
<input type="text" name ="lastNameNewUser" id="lastNameNewUser" size="40" maxlength="40" required autofocus/>
</div>
</div>
</div>
<div >
<label for="nickNewUser">Your Nickname</label>
<input type="text" name ="nickNewUser" id="nickNewUser" size="40" maxlength="40" required autofocus/>
</div>
<div >
<label for="emailNewUser">Your Email</label>
<input type="email" name ="emailNewUser" id="emailNewUser" size="40" maxlength="40" required autofocus/>
</div>
<div >
<label for="passwordNewUser">Password</label>
<input type="password" name ="passwordNewUser" id="passwordNewUser" size="40" maxlength="40" required autofocus/>
<i> <span >visibility</span> </i>
</div>
<div >
<label for="rPasswordNewUser">Repeat your password</label>
<div >
<div >
<input type="password" name ="rPasswordNewUser" id="rPasswordNewUser" size="40" maxlength="40" required autofocus/>
</div>
<div >
<i> <span >visibility</span> </i>
</div>
</div>
</div>
<div id="form-checkbox">
<input
type="checkbox"
value=""
name="checkboxterms"
id="checkboxterms"
/>
<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 >
<div style="clear:both;"></div>
<button type="submit" id = "registerButton" name="registerButton" >Register</button>
</div>
<p >Have already an account?
<a href="../login/index.php" ><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
CodePudding user response：
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 >
<div >
<div >
<div >
<div >
<h2 style="color: #FFF; text-align: center;" >Create new Account</h2>
<form action="../home/index.php" name="formRegistration" id="formRegistration" method="post">
<div >
<div >
<div >
<label for="firstNameNewUser" style="margin-left: 0px;">First Name</label>
<input type="text" name="firstNameNewUser" id="firstNameNewUser" size="40" maxlength="40" required autofocus/>
</div>
</div>
<div >
<div >
<label for="lastNameNewUser">Last Name</label>
<input type="text" name="lastNameNewUser" id="lastNameNewUser" size="40" maxlength="40" required autofocus/>
</div>
</div>
</div>
<div >
<label for="nickNewUser">Your Nickname</label>
<input type="text" name="nickNewUser" id="nickNewUser" size="40" maxlength="40" required autofocus/>
</div>
<div >
<label for="emailNewUser">Your Email</label>
<input type="email" name="emailNewUser" id="emailNewUser" size="40" maxlength="40" required autofocus/>
</div>
<div >
<label for="passwordNewUser">Password</label>
<div >
<span data-target="#passwordNewUser" >visibility</span>
</div>
<input type="password" name="passwordNewUser" id="passwordNewUser" size="40" maxlength="40" required autofocus/>
</div>
<div >
<label for="rPasswordNewUser">Repeat your password</label>
<div >
<div >
<span data-target="#rPasswordNewUser" >visibility</span>
</div>
<input type="password" name="rPasswordNewUser" id="rPasswordNewUser" size="40" maxlength="40" required autofocus/>
</div>
</div>
<!-- Just for fun, the eye as a Bootstrap input
addon is much cleaner -->
<div clas="control mb-4">
<div >
<input type="password" name="r2PasswordNewUser" id="r2PasswordNewUser" size="40" maxlength="40" required autofocus/>
<span >
<span data-target="#r2PasswordNewUser" >visibility</span>
</span>
</div>
</div>
<div id="form-checkbox">
<input type="checkbox" value="" name="checkboxterms" id="checkboxterms" />
<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 >
<div style="clear:both;"></div>
<button type="submit" id="registerButton" name="registerButton" >Register</button>
</div>
<p >Have already an account?
<a href="../login/index.php" ><u>Login here</u></a>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</body>CodePudding user response：
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 me know if you have any questions! :)
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 >
<div >
<div >
<div >
<div >
<h2 style="color: #FFF; text-align: center;" >Create new Account</h2>
<form action="../home/index.php" name="formRegistration" id="formRegistration" method="post">
<div >
<div >
<div >
<label for="firstNameNewUser" style="margin-left: 0px;">First Name</label>
<input type="text" name ="firstNameNewUser" id="firstNameNewUser" size="40" maxlength="40" required autofocus/>
</div>
</div>
<div >
<div >
<label for="lastNameNewUser">Last Name</label>
<input type="text" name ="lastNameNewUser" id="lastNameNewUser" size="40" maxlength="40" required autofocus/>
</div>
</div>
</div>
<div >
<label for="nickNewUser">Your Nickname</label>
<input type="text" name ="nickNewUser" id="nickNewUser" size="40" maxlength="40" required autofocus/>
</div>
<div >
<label for="emailNewUser">Your Email</label>
<input type="email" name ="emailNewUser" id="emailNewUser" size="40" maxlength="40" required autofocus/>
</div>
<div >
<label for="passwordNewUser">Password</label>
<input type="password" name ="passwordNewUser" id="passwordNewUser" size="40" maxlength="40" required autofocus/>
<i > <span >visibility</span> </i>
</div>
<div >
<label for="rPasswordNewUser">Repeat your password</label>
<div >
<div >
<input type="password" name ="rPasswordNewUser" id="rPasswordNewUser" size="40" maxlength="40" required autofocus/>
</div>
<div >
<i > <span >visibility</span> </i>
</div>
</div>
</div>
<div id="form-checkbox">
<input
type="checkbox"
value=""
name="checkboxterms"
id="checkboxterms"
/>
<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 >
<div style="clear:both;"></div>
<button type="submit" id = "registerButton" name="registerButton" >Register</button>
</div>
<p >Have already an account?
<a href="../login/index.php" ><u>Login here</u></a>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>