Руководство по написанию навигации по клавишам со стрелками на фокусируемых элементах?

Я хочу, чтобы ссылки и элементы ввода на моей странице имели foucs, по которым можно было бы перемещаться с помощью клавиш со стрелками. Это легко, если я просто подумаю о клавишах со стрелками вверх/вниз, которые аналогичны табуляции/Shift+Tab.

Просто найдите следующий элемент и сфокусируйтесь на нем.

Может ли кто-нибудь предложить аккуратный способ обработки случая, когда пользователь хочет перейти влево/вправо через ближайший элемент?


person Cris Stringfellow    schedule 17.03.2013    source источник
comment
Структура DOM не имеет макета. Это не вертикально и не горизонтально. Это различие определяется таблицей стилей браузера по умолчанию и/или CSS страницы. Следующий или предыдущий элемент DOM — это просто следующий или предыдущий узел в дереве DOM.   -  person Boaz - CorporateShillExchange    schedule 17.03.2013
comment
Хорошая точка зрения. Он должен каким-то образом основываться на смещении элемента, getBoundingClientRects, но это кажется сложным/дорогим.   -  person Cris Stringfellow    schedule 17.03.2013
comment
На самом деле это дает мне идею. Возможно, можно определить пользовательский индекс упорядочения. С соседними по вертикали элементами, отличающимися на +/- 1, и соседними по горизонтали элементами, отличающимися на +/- column_height. Затем используйте jQuery, чтобы выбрать их. Поскольку мои меню не изменятся, это должно быть возможно.   -  person Cris Stringfellow    schedule 17.03.2013


Ответы (1)


Я думаю, что лучший способ — определить пользовательский индекс порядка arrow_nav, что-то в этом роде:

screen.addInput({ name:'height', arrow_nav_index:1 });
screen.addInput({ name:'weight', arrow_nav_index:2 });
screen.addInput({ name:'eye color', arrow_nav_index:3 });
screen.addInput({ name:'hair color', arrow_nav_index:4 });
screen.addInput({ name:'star sign', arrow_nav_index:5 });
screen.addInput({ name:'think star signs are bullshit?', arrow_nav_index:6 });

Затем мы можем перемещаться по вертикали между (1,2,3) и (4,5,6) без изменения столбцов. Также мы можем перемещать стрелки по горизонтали между (1,4), (2,5), (3,6), не меняя ряды.

Это основная идея. Я думаю сделать это как пользовательскую карту. Или просто автоматизировав его, указав высоту столбца для столбца входных данных, а затем неявно присвоив каждому вводу индекс порядка, в котором он был добавлен, сделает навигацию по стрелкам реальностью.

Ура.

person Cris Stringfellow    schedule 17.03.2013