Перемещение каретки между inputs клавиатурными стрелками
 

Помогите оптимизировать функцию перемещения каретки между <input type="text"> клавиатурными стрелками.

Есть группа <input type="text"> с id="aij", где i=1,..,m и j=1,...,n. Например

<div id="cellMat">
    <input id="a11"><input id="a12"><input id="a13"><input id="a14"><br>
    <input id="a21"><input id="a22"><input id="a23"><input id="a24"><br>
    <input id="a31"><input id="a32"><input id="a33"><input id="a34"><br>
    <input id="a41"><input id="a42"><input id="a43"><input id="a44">
</div>

Вроде, получилось (и IE8), но не могу оптимизировать циклы.
Или, вообще, это "немного" по-другому делается?

<script language="javascript" type="text/javascript">
document.onkeydown = function checkKeycode(event)
{
    var foc = document.activeElement;           //Получаем элемент, на котором фокус
    
    if ( !(/a\d\d/.test(foc.id)) ) return true;

    var cellMat = document.getElementById('cellMat'),
        inputs = cellMat.getElementsByTagName('input'),
        lastId = inputs[inputs.length-1].id,
        m = lastId.replace(/a(\d)\d/,'$1'),
        n = lastId.replace(/a\d(\d)/,'$1');

    if (!event) var event = window.event;
    if (event.keyCode) var keycode = event.keyCode;  // IE
    else if (event.which) var keycode = event.which; // all browsers
    
    function Id(i,j){ return document.getElementById('a'+i+j); }

    for (var i=1; i<=m; i++)               // Как оптимизировать??
     { for (var j=1; j<=n; j++)            // Нужен ли break ??
        { if (foc == Id(i,j))
           { if (keycode == 37 && j>1) Id(i,j-1).focus();  //Стрелка влево
             if (keycode == 38 && i>1) Id(i-1,j).focus();  //Стрелка вверх
             if (keycode == 39 && j<n) Id(i,j+1).focus();  //Стрелка вправо
             if (keycode == 40 && i<m) Id(i+1,j).focus();  //Стрелка вниз
           }
        }
     }

}
</script>

<div id="cellMat">
    <input id="a11"><input id="a12"><input id="a13"><input id="a14"><br>
    <input id="a21"><input id="a22"><input id="a23"><input id="a24"><br>
    <input id="a31"><input id="a32"><input id="a33"><input id="a34"><br>
    <input id="a41"><input id="a42"><input id="a43"><input id="a44">
</div>

Ну и зачем там цикл? Определил элемент, имеющий фокус, определил стрелку, которую нажали, передал фокус в нужное направление. Где тут цикл в алгоритме?

Не получается без циклов((

Кажется, дошло.

Верно понял?

<script language="javascript" type="text/javascript">
document.onkeydown = function checkKeycode(event)
{
    var foc = document.activeElement;
    
    if ( !(/a\d\d/.test(foc.id)) ) return true;
    
    function Id(id){ return document.getElementById(id); }

    var inputs = Id('cellMat').getElementsByTagName('input'),
        lastId = inputs[inputs.length-1].id,
        m = lastId.replace(/a(\d)\d/,'$1')*1,
        n = lastId.replace(/a\d(\d)/,'$1')*1,
        i = foc.id.replace(/a(\d)\d/,'$1')*1,
        j = foc.id.replace(/a\d(\d)/,'$1')*1;

    if (!event) var event = window.event;
    if (event.keyCode) var keycode = event.keyCode;  // IE
    else if (event.which) var keycode = event.which; // all browsers

    if (keycode == 37 && j>1) return Id('a'+i+(j-1)).focus();
    if (keycode == 38 && i>1) return Id('a'+(i-1)+j).focus();
    if (keycode == 39 && j<n) return Id('a'+i+(j+1)).focus();
    if (keycode == 40 && i<m) return Id('a'+(i+1)+j).focus();
}
</script>

<div id="cellMat">
    <input id="a11"><input id="a12"><input id="a13"><input id="a14"><br>
    <input id="a21"><input id="a22"><input id="a23"><input id="a24"><br>
    <input id="a31"><input id="a32"><input id="a33"><input id="a34"><br>
    <input id="a41"><input id="a42"><input id="a43"><input id="a44">
</div>

Да, примерно так. Только вместо парсинга id, лучше использовать более простой способ, например можно задать атрибуты data-i, data-j

Спасибо :thanks:
Насчёт data согласен, но из-за них придётся много кода править.


P.S. А с http://javascript.ru/forum/misc/4071...ri-bbkoda.html не поможешь ещё? )