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

Добрый день.

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

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


/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }

  <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>

 
0
html javascript jquery web

1 ответов

Насчет плагинов и стрелочек ничего не скажу, но у input есть 2 замечательных свойства, которые могут вам помочь:
accesskey - определяет комбинацию клавиш Alt+[0-9A-Z] для перехода к элементу
tabindex - определяет порядок заполнения элементов по tab.

1

Да, если их даже пронумеровать по порядку (допустим 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. Логично, такого индекса нет. Просто ничего не делаем.
Идею описал, если никто не реализует - вечерком набросаю и выложу.

1