In this video I will create simple button which will toggle and let user see/hide the typed password. We will use Vanilla JavaScript to accomplish this and no library was used to achieve this effect.
If you prefer video, you can watch detail explanation of what’s going on here
HTML used for this tutorial (final version). HTML is fairly simple with an input field of type password and a button which will toggle between show and hide state of typed password.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Show Password</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Show Password</h1> <input type="password" id="pass" placeholder="Password"> <button type="submit" id="btn"><i class="fas fa-eye"></i></button> <!-- include your script file here --> </body> </html>
Complete CSS used for the tutorial. Actual functionality is achieved by JavaScript but I wanted to use Font Awesome icons so I did some CSS for styling. You can add your own styling as required.
body { margin: 25px; background: whitesmoke; } #pass { padding: 5px 10px; font-size: 15px; border-radius: 5px; border: 1px solid #ccc; box-shadow: 1px 1px 1px #333; } #pass:focus { border: 1px solid #000; box-shadow: 1px 1px 1px #111; } #btn { padding: 5px 10px; font-size: 14px; border-radius: 5px; border: 1px solid #666; box-shadow: 1px 1px 1px #ddd; background: linear-gradient(#fff, #eee, #fff); color: grey; cursor: pointer; } #btn i:focus { outline: none; }
Final JavaScript code. JavaScript in itself is not too complicated. All we are doing is grabbing the input field and changing its type between text and password after listening to user clicks on the show/hide button.
const btn = document.querySelector('#btn'); const pass = document.querySelector('#pass'); btn.addEventListener('click', function(){ if(pass.type == 'text') { pass.type = 'password'; btn.innerHTML = '<i class="fas fa-eye"></i>'; } else { pass.type = 'text'; btn.innerHTML = '<i class="fas fa-eye-slash"></i>'; } });