Single Input Form

Test Case http://www.awayback.com/single-input-login-form-2/

HTML

<form action="form_action.php" method="post">
    <p>Insert your username and password:</p>
    <small>Tip: you can either press the <code>space</code> to jump to the password field</small>​
    <div id="wrapper">
        <input type="text" name="username" value="Username" />
        <input type="password" name="password" value="Password"/>
    </div>
    <input type="submit" value="Submit" />
    <p>Forgot your <a href="#">username</a> or <a href="#">password</a>?</p>
</form>
<small>Fuck! This login form is pretty damm ugly!</small>​

CSS

html{
    font-size:75%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    color: #444;
    background: #efefef;
    font-family: "Helvetica Neue", Helvetica, Arial sans-serif;
}

code{
    font-family: monaco;
}

form{
    padding: 10px;
    -webkit-border-radius: 5px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 5px;
    background:-webkit-gradient(linear,left bottom,left top,color-stop(0.02, rgb(40,40,40)),color-stop(1, rgb(99,99,99)));
    background:-moz-linear-gradient(center bottom,rgb(40,40,40) 2%,rgb(99,99,99) 100%);
    -o-box-shadow: 0 0 5px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.5), inset 0px 60px 0px rgba(255,255,255,.05);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,.5);
    box-shadow: 0 0 5px rgba(0,0,0,.5);
    
}
small{
    text-shadow: 0 1px 0 #fff;
}

form small{
    text-shadow: 0 1px 0 #000;
    color: #efefef;
}

p{
    text-shadow: 0 1px 0 #000;
    color: #efefef;
    clear: both;
}

a{
    color: #efefef;
    font-weight: bold;
    text-decoration: none;​
}

div{
    width: 80%;
    height: 30px;
    margin: 0.5em 0;
    float: left;
    padding: 0 0.5em;
    border: 1px solid #666;
    background-color: #fff;
    -webkit-border-radius: 5px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -o-box-shadow: inset 0 0 5px rgba(0,0,0,.3);
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 0 5px rgba(0,0,0,.3);
    box-shadow: inset 0 0 5px rgba(0,0,0,.3);
}

input[type="text"],input[type="password"]{
    width: 60px;
    height: 30px;
    border: none;
    outline: none;
    background-color: transparent;​
}

input[type="submit"]{
    float:left;
    width: 16%;
    height: 34px;
    margin: 0.5em 0;
    margin-left: -10px;
    border: 1px solid rgba(0,0,0,.3);
    /*
        Animation Zone
        Just for the fun of it =)​
    */
    -webkit-transition: all 1s ease-in-out;
   ...

JavaScript

//Variaveis iniciais já nem sei bem porque é que as pus...​
var $d = $(document),
    $username = $('input[name="username"]'),
    $password = $('input[name="password"]'),
    originalValue = "";

//Calcular o novo width para o campo


function calculateNewWidth($input) {
    //Retira o value do input
    var content = $input.val();
    //Cria um paragrafo dummy​​
    dummy = document.createElement('p');
    //Definições de CSS para o paragrafo que criamos de forma a conseguir
    //Retirar o width dele​​​
    $(dummy).css({
        width: 'auto',
        display: 'none'
    });
    //Insere o value do input, dentro do paragrafo​​​
    $(dummy).html(content);
    //insere o paragrafo dentro do DOM para conse​​guir medir a largura
    $('body').append($(dummy));
    //Saca a largura​
    var newWidth = $(dummy).outerWidth();
    //remove o paragrafo​
    $(dummy).remove();

    return newWidth;
}

//Comportamento de Teclas
$d.delegate('input:not("input[type="submit"]")', "keyup", function(e) {
    var valWidth = calculateNewWidth($(this));

    //Esta é a zona problematica
    //com ou sem animação... o comportamento acontece de forma tardia
    //resultando em caracteres ficarem escondidos
    //e dps aparecerem​​​
    //os +5 e +10px sao uma especie de margem de segurança para acrescentar
    //espaço antes de o espaço dentro do input acabar​​​​​
    if (valWidth + 5 >= $(this).width()) {
        $(this).animate({
            width: valWidth + 10
        }, "fast");
    }

    if ($(this).attr("type") !== "password") {
        console.log();
    }

    if (e.keyCode === 32 && $(this).attr("type") !== "password") {
        //Retira o espaco que se cria no login para alternar de campos​​​​
        var newValue = $(this).val().replace(/\W/gi, "");
        $(this).val(newValue);
        //Salta para o input seguinte​​
        $(this).trigger("blur");
        $('input').next().focus();

        //Só porque sim
        return false;
    }
});

//Comportamento de focus...