键盘导航使用淘汰赛 [英] keyboard navigation using knockout

问题描述

我在我的viewmodel中有一个可观察的数组，我绑定到使用foreach和模板绑定的div元素列表。我怎样才能使用键盘的上下箭头键浏览这些div元素。

我想要的方式是当用户点击获取焦点的div元素之一当他按下下箭头键时，下一个div元素获得焦点，同样当他按下上箭头键时，前一个div获得焦点。我在互联网上搜索，但没有遇到一个合适的答案。谢谢!!

解决方案

我建议在这个特定的组件/模板的最上面的容器中处理键盘快捷键小部件。这可以让你在一个地方处理上/下，而不是让每个李负责它的快捷方式。

另外，为了使元素可选择使用鼠标和本机

寻找knockout的焦点绑定也有帮助。

编辑：也找到了这个有用的库。 https://github.com/bramstein/knockout.selection

I have an observable array in my viewmodel which I am binding to a list of div elements using foreach and template binding. How can I navigate through these div elements using keyboard's up and down arrow key.

The way I want is when the user clicks on 1 of the div element that gets the focus and when he presses the down arrow key the next div element gets focus and similarly when he presses the up arrow key the previous div gets focus. I have searched all over the internet but didn't came across a suitable answer. Thanks!!

解决方案

I'd advise handling the keyboard shortcuts in the topmost container of your "component/template" for this particular widget. this lets you handle the up / down in one place, instead of making each li responsible for it's shortcuts.

Additionally in order to make the elements selectable using the mouse and native tab events, look into "roving tab indices".

Looking into the focus binding for knockout helps too.

Edit: found this helpful library as well. https://github.com/bramstein/knockout.selection

这篇关于键盘导航使用淘汰赛的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！