Табуляция в форме
 

Здравствуйте! Помогите решить алгоритм. есть форма:

<form name="registr" id="registr">
<input type="text" name="key1" id="key1" maxlength="6">
<input type="text" name="key2" id="key2" maxlength="6">
<input type="text" name="key3" id="key3" maxlength="6">
<input type="submit"
</form>

как сделать так, что если при вводе 6 символов в первое поле курсор автоматически переводился во второе поле, если я ввел 6 символов во второе поле курсор сразу переходил на третье. А если я удалил символы ис третего поля то чтоб курсор переходил на второе....
Я так понимаю задача состоит в установке фокуса и создания елементов масива полей ввода??? Или что то другое....
Заранее спасибо

по событию нажатия клавиши делаем ветвление, в котором решаем что делать - фокусить следующий элемент, если длина текущего равна максимальной, или фокусить предыдущий, если длина значения текущего равна нулю :

// вернуть элемент по его id. для укорочения кода
var $ = function(a) {return document.getElementById(a)}, 
    // определение ie
    ie = /*@cc_on!@*/0,
    // максимальная длина
    maxlength = 6,
    //поля, по которым будет туда-сюда двигаться курсор 
    inputs = [$('key1'), $('key2'), $('key3')],
    // на каком поле находится сейчас, в данный момент
    curr = 0;

// onkeydown регистрирует нажатие клавиши даже, если вы её зажали и не отпускали
$("registr").onkeydown = function(e) {
    // элемент, в который вводят текст
    e = ie?event.srcElement:e.target;
    
    // если ввели текст, равный ограничению
    e.value.length==maxlength &&
        // и мы можем передвигать указатель вперёд (вправо)
        inputs[curr+1] &&
            // то делаем это
            inputs[ ++curr ].focus();
    
    // если же длина достигла нуля
    !e.value.length &&
        // и мы можем двигаться назад (влево)
        inputs[curr-1] &&
            // то делаем это
            inputs[ --curr ].focus();
        
    
}

демо

<form name="registr" id="registr">
    <input type="text" name="key1" id="key1" maxlength="6">
    <input type="text" name="key2" id="key2" maxlength="6">
    <input type="text" name="key3" id="key3" maxlength="6">
</form>
<script>
var $ = function(a) {return document.getElementById(a)},
    ie = /*@cc_on!@*/0,
    maxlength = 6,
    inputs = [$('key1'), $('key2'), $('key3')],
    curr = 0;

$("registr").onkeydown = function(e) {
    
    e = ie?event.srcElement:e.target;
    
    e.value.length==maxlength &&
        inputs[curr+1] &&
            inputs[ ++curr ].focus();
    
    !e.value.length &&
        inputs[curr-1] &&
            inputs[ --curr ].focus();
        
    
}
</script>

Спасибо, большое за решенный пример. А то я изучаю джава скрипт Библия пользувателя и понимаю что там не все написано... К примеру с var $ = function(a) впервые столкнулся... В библии про это не написано.... Огромное спасибо!