Show password text with checkbox toggle

markup.html

<form action="">
    <fieldset class="error">
        <div class="form-row">
            <span class="error-hook">
                Please enter a valid email address
            </span>
            <div class="input-hook">
                <label for="email-address" class="placeholder">
                    Email address
                </label>
                <input id="email-address" type="text" value="barry@hotmailcom" class="input hide-on-focus"
                />
            </div>
        </div>
        <div class="form-row">
            <span class="error-hook">
                <strong>
                    HINT:
                </strong>
                Your password is more than 6 characters
            </span>
            <div class="input-hook">
                <label for="password" class="placeholder">
                    Password
                </label>
                <input id="password" type="password" value="" class="input password-input hide-on-focus"
                />
            </div>
            <a href="#">Reset your password</a>
            <label for="show-password" class="checkbox-label show-password">
                <input id="show-password" type="checkbox" />
                <span>
                    Show text
                </span>
            </label>
        </div>
    </fieldset>
</form>

passwordToggle.js

// Toggle the visiblity of the password / pseudo-password
function togglePassword(checkbox, password) {

    // If the show password box is ticked
    if ($(checkbox).is(':checked')) {

        // Hide the actual password input
        $(password).hide();

        // Show the pseudo password text input
        $(password).next().show();

        // If the show password box is NOT ticked 
    } else {

        // Show the actual password input again
        $(password).show();

        // Hide the pseudo password text input
        $(password).next().hide();

    }

}

// Hide placeholders on focus


function hideOnFocus(selector) {

    var checkboxId = '#show-password';
    var passwordId = '#password';
    var $selector = $(selector);
    var $password = $(passwordId);

    // If the input is empty
    if ($selector.val() == '') {

        // Show the label
        $selector.prev().stop(true, true).show();
    }

    // If this is an allowed password field
    if ($password.is('.password-input')) {

        // Get all the classes
        var classes = $password.attr('class');

        // Add a pseudo password text input and apply the classes
        $password.after('<input type="text" class="' + classes + '" value="" />');
    }

    // Toggle password input on DOM ready
    togglePassword(checkboxId, passwordId);

    // When clicking the checkbox
    $('.show-password').click(function () {
        // Toggle the password input								
        togglePassword(checkboxId, passwordId);
    });

    // Bind focusin to the selector to account for input added to the DOM
    $selector.live('focusin', function () {

        // Cache $(this) for speed
        var $this = $(this);

        // Fade in the placeholder label - Use siblings as extra input added to DOM
        $this.siblings('.placeholder').stop(true, true).fadeOut(200);

        // If this is an allowed password field
        if ($this.is('.password-input')) {

            // Monitor the input on keyup
            $this.keyup(function () {

                // Add the value to each input
                // This is so the same text is in each (when showing / hiding pseudo password)
                $(passwordId).val($this.val());
                $(passwordId).next().val($this.val());

            });
        }

    });

    // On focus out, fade in label
    $selector.live('focusout', function () {

        // If the value is empty
        if (this.value == '') {

            // Fade in the placeholder label
            $(this).siblings('.placeholder').stop(true, true).fadeIn(200);
        }
    });
}

styles.css

.form-row {
    margin-bottom:15px;
    overflow:hidden;
}
    
.input-hook {
    position:relative;
}
    
.form-row .placeholder {
    cursor:text;
    display:none;
    left:10px;
    position:absolute;
    bottom:10px;
}
    
.no-js .form-row .placeholder {
    display:block;
    position:static;
}

.error .input {
    background:#fff5f5;
    border-color:#CE3631;
    color:#CE3631;
}
    
.error .placeholder {
    color:#CE3631;
}

.error-hook {
    border-color:#CE3631;
    clear:both;
    color:#CE3631;
    float:left;
    padding:0 0 10px 0;
}