So I want to make a script when the user click on the eye icon, the html code change to eye-slash icon and the password type change to text from password,and if the eye-slash icon is active then it change back to eye icon and the type will be password again.
Firstly I tried with two icon,and If i click on it one will disappears and one will appears,but now I see this is was a really bad idea,because this has some bugs.
So I want to toggle the html code with jquery. And I tried to make if the input field is empty then the eye icon disappear,and if it has some text,then its appear.
But now I'm very confused,and I tired,so I would appreciate if someone can help me in this.
Or just sending me a sample about this.
function hiddenscript() {
var eye = document.getElementById("eye");
eye.style.display = "block";
}
function Showfunction() {
var eye = document.getElementById("eye");
var eye2 = document.getElementById("eye2");
var pass = document.getElementById("pass");
var value = document.getElementById('pass').value;
if(value.length > 0){
eye.style.display = "block";
}
if(value.length == 0)
{
eye.style.display = "none";
}
if (pass.type === "password") {
pass.type = "text";
eye.style.display = "none";
eye2.style.display = "block";
}
else {
pass.type = "password";
eye2.style.display = "none";
eye.style.display = "block";
}
}.passwordContainer {
position: absolute;
margin: 45px 0;
width:355px;
height:60px;
padding-bottom:5px;
}
input {
position:relative;
width: 350px;
height: 60px;
font-size: 35px;
color: #555;
font-family: 'poppins', sans-serif;
}
.fas {
display: block;
float: right;
margin-right:15px;
margin-top:-45px;
position: relative;
color: #555;
font-size:23px;
cursor: pointer;
z-index: 3;
display: none;
}
#eye {
display:none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
<div class="passwordContainer">
<div class="fieldcontainer">
<input type="password" name="password" autocomplete="off" class="input" maxlength="22" id="pass" oninput="hiddenscript()" required="">
<div class="Eyeicon">
<div class="eyeicon"><i class="fas fa-eye" id="eye" onclick="Showfunction()"></i></div>
<!-- <i class="fas fa-eye-slash" id="eye2" onclick="Showfunction()"></i> -->
</div>
</div>
</div>
<html>
Aucun commentaire:
Enregistrer un commentaire