phone

by AJIEKCEU

HTML

<div class="input-group">
    <input maxlength="2" size="2"/>
    <span><input maxlength="3" size="3"/></span>
    <input maxlength="1" size="1" />
    <input maxlength="5" size="4" />
    <input maxlength="3" size="3" />
</div>

CSS

input {
    text-align: center;
}

JavaScript

$(document).on('keydown keypress', '.input-group', function (evt){
    var inp = evt.target, char = String.fromCharCode(evt.which);
    if( evt.type == 'keypress' ){
        if( inp.value.length == inp.maxLength ){
            var $group = $(':text', this);
            $group.eq($group.index(inp) + 1).focus().val( char );
        }
    } else if( evt.keyCode == 8 ){
        if( inp.value == '' ){
            var $group = $(':text', this);
            $group.eq($group.index(inp) - 1).focus();
            evt.preventDefault();
        }
    }
});