Показать сообщение отдельно
  #1 (permalink)  
Старый 23.08.2013, 16:19
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

Перемещение каретки между 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>

Последний раз редактировалось Demath, 23.08.2013 в 17:40. Причина: Опечатка в коде
Ответить с цитированием