Перемещение между полями INPUT стрелками на Web странице

Добрый день.

Существует форма, матрица, с таблицей ввода.
Как сделать перемещение по такой таблице стрелочками (поля ввода как горизонтально расположены, так и вертикально)

Желательно чтобы было решение на фрейворке jquery



  <tr>
    <td class="font_weight8">40</td><td>
    </td><td><input name="v[80][40]" class="text-input form_reset" type="text"></td><td>
    </td><td><input name="v[92][40]" class="text-input form_reset" type="text"></td><td>
    </td><td><input name="v[95][40]" class="text-input form_reset" type="text"></td><td>
    </td><td><input name="v[98][40]" class="text-input form_reset" type="text"></td><td>
    </td><td><input name="v[51][40]" class="text-input form_reset" type="text"></td><td>    
  </td></tr>

  <tr>
    <td class="font_weight8">50</td><td>
    </td><td><input name="v[80][50]" class="text-input form_reset" type="text"></td><td>
    </td><td><input name="v[92][50]" class="text-input form_reset" type="text"></td><td>
    </td><td><input name="v[95][50]" class="text-input form_reset" type="text"></td><td>
    </td><td><input name="v[98][50]" class="text-input form_reset" type="text"></td><td>
    </td><td><input name="v[51][50]" class="text-input form_reset" type="text"></td><td>    
  </td></tr>

 
no image

Аноним

26 сентября, 07:57
524

Нет комментариев

Добавить комментарий
Вы не можете оставлять комментарии. Чтобы добавить комментарий, залогиньтесь или зарегистрируйтесь
Вы не можете голосовать. Чтобы проголосовать, залогиньтесь или зарегистрируйтесь

1 ответ

Насчет плагинов и стрелочек ничего не скажу, но у input есть 2 замечательных свойства, которые могут вам помочь:
accesskey - определяет комбинацию клавиш Alt+[0-9A-Z] для перехода к элементу
tabindex - определяет порядок заполнения элементов по tab.
Да, если их даже пронумеровать по порядку (допустим id='cell_1', id='cell_2' и т.д.)
То все становится проще. На нажатие клавиш в инпутах вешаем обработчик - если нажата одна из стрелок (проверяем код) - то получаем id инпута. Допустим, это cell_24. Через регулярку извлекаем 24. Затем, мы должны знать кол-во ячеек в строке (допусти, при выводе в js блоке объявили какую нить глоб переменную). Например, кол-во ячеек в строке = 10.
Далее, в зависимости от того, какая была клавиша нажата, столько и нужно отнимать/прибавлять от/к ID (вверх, значит отнять 10, вниз - прибавить, влево - отнять....). Причем для 4х вариантов нужно продумать вариант обработки, ведь фокус не всегда нужно перекидывать.(например, ячейка первая в строке, а вы нажали "влево". Все легко рассчитывается).
И так, для пример - мы нажали "вверх".
Далее, допустим была 24-10=14. итого => кидаем в нее фокус: $('cell_14').focus();
Если бы мы были в ячейке 5 и нажали вверх: 5-10 = -5 < 1. Логично, такого индекса нет. Просто ничего не делаем.
Идею описал, если никто не реализует - вечерком набросаю и выложу.

no image

Аноним

26 сентября, 08:42

Нет комментариев

Добавить комментарий
Вы не можете отвечать на вопросы. Чтобы ответить на вопрос, пожалуйста залогиньтесь или зарегистрируйтесь
Работа в Украине
Вакансии от WORK.ua
Контент-менеджер, 7000 грн.
Киев, PARFUMS.UA
Инженер-электронщик
Одесса, Центральні ігри, ТОВ
Javascript-программист, 14000 грн.
Одесса, Avrorum
Руководитель интернет-магазина
Одесса, Осенина Е.С., ФЛП
Middle PHP Developer, 50000 грн.
Киев, Tiec Тex
IT-експерт (ТРЦ "Квадрат"), 10000 грн.
Киев, Moyo, мережа магазинів
Senior React Native Developer, 130000 грн.
Киев, скрыто
Инженер по ремонту ноутбуков, планшетов,..., 12000 грн.
Киев, F1Center, сервисная компания
Инженер сопровождения SAP
Киев, Ukrsibbank BNP Paribas Group