Number Input Fancifier

Fancy input for entering multiple numbers quickly.

by Preston Badeer

HTML

<div class="numbers">
    <input type="text" id="N1" />
    <input type="text" id="N2" onfocus="addBox(this)" />
</div>
<div class="stored"></div>

CSS

input {
    float: left;
    clear: both;
}
/* relative/optional */
 div {
    clear: both;
}
.stored input {
    background: none;
    border: none;
    outline: none;
}

JavaScript

function addBox(elm) {
    // Don't allow focus on second box if first is empty
    if ($('.numbers input:first-child').val() != "") {
        // Remove event from second box
        elm.removeAttribute('onfocus');

        // Shrink the first box, move it to stored, and expand it
        $('.numbers input:first-child').animate({
            marginTop: "-2em",
            opacity: 0
        }, function () {
            $(this).prependTo('.stored').animate({
                marginTop: 0,
                opacity: 1
            });
        });

        // Create new second box, hide it, put it in numbers, and fade it in
        var n = $('.numbers input:last-child').attr('id').split('N')[1] * 1 + 1;
        $('<input onfocus="addBox(this)" type="text" id="N' + n + '"/>').hide().appendTo('.numbers').fadeIn();
    } else {
        $('.numbers input:first-child').focus();
    }
}