Better Password Masking For Sign-Up Forms

by joquery

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="well">

    <form class="form-horizontal">
        <legend>Login to this <strong>awesome</strong> website</legend>
        <div class="control-group">
            <label class="control-label" for="inputEmail">Email</label>
            <div class="controls">
                <input type="text" id="inputEmail" placeholder="Email">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="inputPassword">Password</label>
            <div class="controls">
                <input type="password" id="inputPassword" placeholder="Password">
                <input type="text" id="fakeInputPassword" style="display:block">
                <label class="checkbox">
                    <input type="checkbox" id="showPassword"> Show my password
                </label>
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <button type="submit" id="submitForm" class="btn btn-primary">Sign in</button>
            </div>
        </div>
    </form>

</div>

CSS

/* <3 Thank you twitter <3 */

JavaScript

jQuery(document).ready(function($) {
    
    var $inPassword = $("#inputPassword"),
        $inFakePassword = $("#fakeInputPassword"),
        $cbShowPassword = $("#showPassword"),
        $btnSubmit = $("#submitForm"),
        timeOut;
        
    
    //
    $inPassword.on("keyup", function() {
        $inFakePassword.val($inPassword.val());
    });
    
    //
    $inFakePassword.on("keyup", function() {
        $inPassword.val($inFakePassword.val());
    });
    
    // 
    $cbShowPassword.on("change", function() {
        var $this = $cbShowPassword;
        if ($this.prop("checked")) {
            $inPassword.hide();
            $inFakePassword.show().focus();
            
            timeOut = setTime
            
        } else {
            $inFakePassword.hide();
            $inPassword.show().focus();
        }
    });
    
    // don't really submit the form
    $btnSubmit.on("click", function(){
        return false;
    });
    
});