Fill in the blank concept

by janeklb

HTML

<div class="fitb-container">
    <div class="fitb-character">W</div>
    <div class="fitb-character">O</div>
    <div class="fitb-character">N</div>
    <input type="text" class="fitb-character" name="fitb-4" maxlength="1" />
    <input type="text" class="fitb-character" name="fitb-5" maxlength="1" />
    <input type="text" class="fitb-character" name="fitb-6" maxlength="1" />
    <input type="text" class="fitb-character" name="fitb-7" maxlength="1" />
    <input type="text" class="fitb-character" name="fitb-8" maxlength="1" />
    <div class="fitb-character">C</div>
    
    <a href="javascript:clearFitb();"><img src="http://www.turnerresidential.com/wp-content/themes/turner2/Mortgage-PITI_files/ClearIcon.gif" alt="Clear Blanks" /> <span>Clear Blanks</span></a>
</div>

CSS

.fitb-character {
    display: block;
    text-align: center;
    margin: 0 3px 0 0;
    padding: 0;

    font-family: monospace;
    font-size: 16px;
    width: 16px;
    float: left;
}

input.fitb-character {
    border: 0;
    border-bottom: 1px solid black;
}

a {
    text-decoration: none;
    font-size: 0.7em;
    color: #999999;
    margin-left: 6px;
}
a span { display: none; }
a:hover span { display: inline; }
img { border: 0; vertical-align: top; }

JavaScript

$('input.fitb-character').on('click', function() {
    this.select();
}).on('keydown', function(evt) {
    var $this = $(this), val = $this.val();
    if (evt.keyCode == 8 && val == '') {
        var $prev = $this.prev(':input');
        if ($prev.length) {
            $prev.focus();
            $prev[0].select();
        }
    }
}).on('keyup', function(evt) {
    var $this = $(this), val = $this.val(), $next = $this.next(':input');
    if (val != '' && evt.keyCode >= 48 && evt.keyCode <= 90) {
        //$this.val(val.toUpperCase());
        while ($next.length) {
            if ($next.hasClass('fitb-character')) {
                $next.focus();
                $next[0].select();
                break;
            }
            $next = $next.next(':input');
        }
    } else if (evt.keyCode == 39 || evt.keyCode == 40) {
        if ($next.length) {
            $next.focus();
            $next[0].select();
        }
    } else if (evt.keyCode == 37 || evt.keyCode == 38) {
       var $prev = $this.prev(':input');
       if ($prev.length) {
           $prev.focus();
           $prev[0].select();
       }
    }
});

window.clearFitb = function() {
    $('input.fitb-character').val('');
    $('input.fitb-character:first').focus();
};