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