$(document).ready(function() {
 
    // cache references to the input elements into variables
    var passwordField = $('input[name=password]');
    var usuarioField = $('input[name=usuario]');
    // get the default value for the usuario address field
    var usuarioFieldDefault = usuarioField.val();
 
    // add a password placeholder field to the html
    passwordField.after('<input id="passwordPlaceholder" type="text" value="contrase&ntilde;a" autocomplete="off" size="9" maxlength="10"/>');
    var passwordPlaceholder = $('#passwordPlaceholder');
 
    // show the placeholder with the prompt text and hide the actual password field
    passwordPlaceholder.show();
    passwordField.hide();

    // when focus is placed on the placeholder hide the placeholder and show the actual password field
    passwordPlaceholder.focus(function() {
        passwordPlaceholder.hide();
        passwordField.show();
        passwordField.focus();
    });
    // and vice versa: hide the actual password field if no password has yet been entered
    passwordField.blur(function() {
        if(passwordField.val() == '') {
            passwordPlaceholder.show();
            passwordField.hide();
        }
    });
 
    // when focus goes to and moves away from the usuario field, reset it to blank or restore the default depending if a value is entered
    usuarioField.focus(function() {
        if(usuarioField.val() == usuarioFieldDefault) {
            usuarioField.val('');
        }
    });
    usuarioField.blur(function() {
        if(usuarioField.val() == '') {
            usuarioField.val(usuarioFieldDefault);
        }
    });
 
});