Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Show password using jQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 48
    Comment on it

    It shows  the password in plain text and help user to check whether password entered is correct or not. Basically   it Reveals the hidden passwords in the form of characters and numbers and provide convenience for checking your password and rectifying it if entered wrongly.

    HTML Code:
    
    <div class="container  super">
            <h1 class="align-center text-primary log">
                <span>Log In</span>
            </h1>
             <form class="form-signin">
                <div class="form-group">
                    <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
                </div>
                <div class="form-group">
                    <input type="password" id="pass" class="form-control" placeholder="Password" required>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" id="show_hide" value="remember-me"> Show my Password
                  </label>
                </div>
                <button class="btn btn-lg btn-primary btn-block butt" type="submit">Login in</button>
            </form>
        </div>
    
    jquery Code:
    
    function showpass() {
    	var i = $("#show_hide");
    	i.click(function() {
    		if ($("#pass").attr("type")=="password") {
    			$("#pass").attr("type", "text");// this will show the text of password
    		} else {
    			$("#pass").attr("type", "password");// this condition hides the entered password
    		}
    	})
    }
    
    $(document).ready(function () {
    	
    	showpass();
    });
    
    
    CSS Code:
    
    .log span{
      color:gray; 
    }
    .super .butt{
    	background-color: green;/* backgorund-color of login button */ 
    }
    .super {
        font-size: 20px;
        margin-top:150px;
    }
    
    
    
    .align-center {
    	text-align: center;
    }
    

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: