password eye in input field
PASSWORD EYE
PLEASE WATCH MY YOUTUBE CHANNEL @KSSVINAY
this is the code for what you see in the images
NOTE : image will not be visible in your computer because the source of image is my computer, not yours
check end of this page to download those eye images
this code generates a input field with eye icon to right of it which is used to view or hide password characters when the characters are visible then if you click on it then characters change into dots
and when the dots are visible if you click on the eye icon then the dots change into characters
this helps you to protect your password from others when you are typing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 100vh;
display: flex;
justify-content: center;align-items: center;
margin: 0;padding: 0;
background-image: linear-gradient(45deg , rgb(100, 100, 255) , rgb(199, 19, 19));
}
.box{
height: 50px;width: 400px;
background-color: rgba(255, 255, 255, 0.459);
display: grid;
grid-template-columns: 87.5% 12.5%;
}
.icon{
height: 50px; width: 50px;
background-color: rgba(255 , 255 , 255 ,0.486);
display: flex;
justify-content: center;
align-items: center;
}
img{
height: 35px;
}
.input{
height: 50px; width: 350px;
display: flex;
justify-content: center;
align-items: center;
}
input{
height: 50px;width: 350px;
border: none;
outline: none;
background: transparent;
font-size: larger;
}
</style>
</head>
<body>
<div class="box">
<div class="input">
<input type="password" id="inp">
</div>
<div class="icon" onclick="my()" >
<img id="im" src="/youtube/private.png" alt="eyeicon">
</div>
<script>
window.onload = () =>{
document.getElementById("inp").focus();
}
function my(){
var inp = document.getElementById("inp")
var im = document.getElementById("im")
if (inp.type == "password") {
inp.setAttribute("type" , "text")
im.setAttribute("src" , "/youtube/view.png")
}else if (inp.type == "text"){
inp.setAttribute("type" , "password")
im.setAttribute("src" , "/youtube/private.png")
}
}
</script>
</body>
</html>
Comments
Post a Comment