May 10, 2016
How to Show/Hide Password in TextBox with Button using jQuery
In this tutorial, we’re going to have a quick look at how to Show/Hide password in the text box with a button using jquery. When you’re creating a register form it’s good work to have this form as small as possible, by one of the form fields used will be for passwords. There is a popular trend when showing a password field to the user, so user confirm password field and make sure they match, this is to avoid the chances of the user not entering the wrong password in the field.
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>SoftAox | ShowHide Password Tutorial</title> <script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script> </head> <body> <h1>Login</h1> <form> <label>Username</label> <input type="text" name="username" id="username"/><br/><br/> <label>Password</label> <input type="password" name="password" id="password"/><br/><br/> <button type="button" id="show_hide" name="show_hide">Show</button> </form> </body> </html> <script> $(document).ready(function(){ $('#show_hide').on('click', function(){ var passwordField = $('#password'); var passwordFieldType = passwordField.attr('type'); if(passwordFieldType == 'password') { passwordField.attr('type', 'text'); $(this).text('Hide'); } else { passwordField.attr('type', 'password'); $(this).text('show'); } }); }); </script> |
Download
