Как переходить между input'ами нажатием на кнопки стрелок?

Question

[podushka]

Как можно с помощью нажатия на стрелки перемещаться по таблице с input'ами?
https://jsfiddle.net/19ez6uLm/
Если что, то нажатие tab мне к сожалению не подходит.

Comments

[Froggyweb]

Как в экселе что ли. Нужно состояние ячейки редактирование/перемещение наверняка есть готовые решения, но скорее всего под реакт или аналоги.
решение вообще странное. все ячейки должны быть с одинаковой разметкой

люблю больше php

но например в json будет стоять состояние disabled

Answer 1

[Максим Ткачев]

Пример

var start = document.getElementById('start');
start.focus();
start.style.backgroundColor = 'green';
start.style.color = 'white';

function dotheneedful(sibling) {
if (sibling != null) {
start.focus();
start.style.backgroundColor = '';
start.style.color = '';
sibling.focus();
sibling.style.backgroundColor = 'green';
sibling.style.color = 'white';
start = sibling;
}
}

document.onkeydown = checkKey;

function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38') {
// up arrow
var idx = start.cellIndex;
var nextrow = start.parentElement.previousElementSibling;
if (nextrow != null) {
var sibling = nextrow.cells[idx];
dotheneedful(sibling);
}
} else if (e.keyCode == '40') {
// down arrow
var idx = start.cellIndex;
var nextrow = start.parentElement.nextElementSibling;
if (nextrow != null) {
var sibling = nextrow.cells[idx];
dotheneedful(sibling);
}
} else if (e.keyCode == '37') {
// left arrow
var sibling = start.previousElementSibling;
dotheneedful(sibling);
} else if (e.keyCode == '39') {
// right arrow
var sibling = start.nextElementSibling;
dotheneedful(sibling);
}
}