Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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. Причина: Опечатка в коде
Ответить с цитированием
  #2 (permalink)  
Старый 23.08.2013, 17:54
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Ну и зачем там цикл? Определил элемент, имеющий фокус, определил стрелку, которую нажали, передал фокус в нужное направление. Где тут цикл в алгоритме?
Ответить с цитированием
  #3 (permalink)  
Старый 23.08.2013, 17:58
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

Сообщение от danik.js
Ну и зачем там цикл? Определил элемент, имеющий фокус, определил стрелку, которую нажали, передал фокус в нужное направление. Где тут цикл в алгоритме?
Не получается без циклов((
Ответить с цитированием
  #4 (permalink)  
Старый 23.08.2013, 18:47
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

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

Верно понял?

<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>
Ответить с цитированием
  #5 (permalink)  
Старый 23.08.2013, 18:55
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Да, примерно так. Только вместо парсинга id, лучше использовать более простой способ, например можно задать атрибуты data-i, data-j
Ответить с цитированием
  #6 (permalink)  
Старый 23.08.2013, 19:11
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

Сообщение от danik.js Посмотреть сообщение
Да, примерно так. Только вместо парсинга id, лучше использовать более простой способ, например можно задать атрибуты data-i, data-j
Спасибо
Насчёт data согласен, но из-за них придётся много кода править.


P.S. А с Определить, находиться ли каретка внутри ббкода не поможешь ещё? )

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перемещение между строками ввода стрелками Воитель Общие вопросы Javascript 5 23.08.2010 15:23