[melky]

написал маленький скриптик

есть 2 версии : исходник и очень сильно ужатая (GCC, advanced mode).

строка в конце "_keyNav" - имя глобальной переменной, которую можно будет использовать для создания навигации

если хотите, можно её изменить на "mySuperNav" или что-то в этом духе.

маленькая документация :

конструктор принимает три аргумента

new _keyNav( options, elements [, onmove] );

где options - объект-хеш, содержащий настройки
квадратные скобки показывают необязательные аргументы.

пример:

{
rows: кол-во строк.,
cols: кол-во столбцов,
current: [ текущ. строка, текущ. столбец ]
}

далее, elements. это - коллекция элементов. см. пример

функция onmove будет срабатывать при каждом изменении "активного" элемента (вызов функции moveTo )

в функцию-обработчик псевдособытия передаются 2 аргумента :
первый : с чего перешли, второй : на что перешли.

function my_onmove ( старый элемент, текущий элемент ){};

обработчик сохраняется в свойстве onmove, т.е. его можно менять на другой, если будет необходимо.

....
далее.

у экземпляра (читай: навигации) есть 2 метода : move и moveTo

moveTo просто изменяет внутренний указатель и порождает псевдособытие move (типа низкоуровневая функция)

принимает 1 аргумент - массив с указателем

myNavObj.moveTo( [ строка , столбец ] );

..

функция move принимает один аргумент - строку, содержащую направление сдвига указателя.

возможные значение : "up","down","left","right". смещения указателя соотв. значениям слов.
порождает псевдособытие move

...............................................

всё


выкладываю пример : jsfiddle

и тут

<script type="text/javascript">
(function(l){function g(a,b,c){var d=this[j]=[],e,g=a.rows,k=0,h,i=a.cols;for(e=0;e<g;e++){d[e]=[];for(h=0;h<i;k++,h++){if(!b[k])break;d[e][h]=b[k]}}this[f]=~this.toString.call(a[f]).indexOf("Array")?a[f]:[0,0];this.onmove=typeof c=="function"?c:function(){}}var f="current",j="elementsMatrix",i=g.prototype={};i.moveTo=function(a){var b=this[j];this.onmove.call(this,b[this[f][0]][this[f][1]],b[(this[f]=a)[0]][a[1]])};i.move=function(a){var b=this[j],c=[this[f][0],this[f][1]],d=a=="up"?-1:a=="down"?
1:0,e=a=="left"?-1:a=="right"?1:0;b[c[0]+d]||(d=0);b[c[0]+d][c[1]+e]||(d=a=="left"?-1:1,e=b[c[0]+d]?(a=="left"?1:-1)*(b[0].length-1):d=0);this.moveTo([c[0]+d,c[1]+e])};window[l]=function(a,b,c){return new g(a,b,c)}})("_keyNav");

</script>

<textarea cols="3" rows="3"> </textarea>
<textarea cols="3" rows="3"> </textarea>
<textarea cols="3" rows="3"> </textarea>
<br>
<textarea cols="3" rows="3"> </textarea>
<textarea cols="3" rows="3"> </textarea>
<textarea cols="3" rows="3"> </textarea>

<script type="text/javascript">
var o = { rows:2,cols:3, current : [0,0] }, 
    elems = document.getElementsByTagName("textarea"),
    onmove =  function(oldEl, newEl){ newEl.focus() }
    
var nav = new _keyNav( o, elems, onmove );

console.log(nav)
    
document.body.onkeydown = function(e){ 
     if(!e || !e.keyCode) e=event;
     
     switch( e.keyCode||e.which ){ 
          case 37 : nav.move("left"); break;
          case 38 : nav.move("up"); break;
          case 39 : nav.move("right"); break;
          case 40 : nav.move("down");
     }
     return false; 
};
</script>