In this tutorial we will see how to make Password Field Hide and Show with Toggle Emoji Button using JavaScript. We have used monkey emoji for this purpose, CSS and JavaScript code is given.
Table of Contents
HTML Code
Take a look at the HTML code given below.
<div class="input-group">
<input type="password" id="password" class="input">
<span class="btn" id="btn" onclick="pass(this)">
🙈
</span>
</div>
CSS Code
CSS code is given below.
<style>
body
{
background-color: #bbb;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.input-group
{
padding: 0px 10px;
border: 2px solid #000;
background-color: #fff;
border-radius: 10px;
display: flex;
}
.input
{
padding: 15px 5px;
border:0px;
outline: none;
font-size: 30px;
}
.btn
{
font-size: 40px;
padding: 15px 5px;
cursor: pointer;
}
</style>
JavaScript Code
Take a look at the Pure JavaScript Code given below, in this code we have used innerHTML property to change the emoji on every click. While .type property is used to change the type of input field from text to password and vice versa.
<script>
var a =0;
function pass()
{
if(a==0)
{
document.getElementById('btn').innerHTML='🙊';
document.getElementById('password').type='text';
a=1;
}
else
{
document.getElementById('btn').innerHTML='🙈';
document.getElementById('password').type='password'; a=0;
}
}
</script>
Demo
Video Tutorial
Watch our video tutorial on Password Hide and Show with Toggle Emoji Button using JavaScript.