Перемещение между полями 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
665

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

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

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
Junior аккаунт-менеджер, 11000 грн.
Киев, Авеб
JavaScript Developer
Сумы, PortaOne
Middle SEO Specialist
Киев, Якимовский В.В., ФЛП
Presale support engineer в Ровно
Львов, Сплінкс
SMM-дизайнер, 9500 грн.
Запорожье, SMMSTUDIO
ITOps Engineer
Одесса, Comodo Group, inc.