使用箭头键浏览列表？ （JavaScript的/ JQ）

我似乎无法找到如何实现这一目标的答案，但这是我多次见过的一个function。 基本上我正在回显列表，我想创建使用箭头键/输入突出显示和选择这些项目的function。 有人可以帮助我了解如何实现这一目标吗？ 我知道如何使用密钥代码（当然），而不是如何将其转换为function代码以选择列表中的项目…

我想也许我必须有一些隐藏的单选按钮来将其标记为选中或不…但即便如此我也不知道如何从一个单选按钮跳到另一个上下列表。 所以如果有人能帮我一把，我真的很感激。 谢谢。

Answer 1

既然你没有真正解释你遇到的问题，我就创建了一个通用的解决方案。 希望这会有所帮助：

var li = $('li'); var liSelected; $(window).keydown(function(e) { if(e.which === 40) { if(liSelected) { liSelected.removeClass('selected'); next = liSelected.next(); if(next.length > 0) { liSelected = next.addClass('selected'); } else { liSelected = li.eq(0).addClass('selected'); } } else { liSelected = li.eq(0).addClass('selected'); } } else if(e.which === 38) { if(liSelected) { liSelected.removeClass('selected'); next = liSelected.prev(); if(next.length > 0) { liSelected = next.addClass('selected'); } else { liSelected = li.last().addClass('selected'); } } else { liSelected = li.last().addClass('selected'); } } }); 

JSFiddle： http ： //jsfiddle.net/Vtn5Y/

Answer 2

我的本机JavaScript示例

 var ul = document.getElementById('list'); var liSelected; var index = -1; document.addEventListener('keydown', function(event) { var len = ul.getElementsByTagName('li').length-1; if(event.which === 40) { index++; //down if (liSelected) { removeClass(liSelected, 'selected'); next = ul.getElementsByTagName('li')[index]; if(typeof next !== undefined && index <= len) { liSelected = next; } else { index = 0; liSelected = ul.getElementsByTagName('li')[0]; } addClass(liSelected, 'selected'); console.log(index); } else { index = 0; liSelected = ul.getElementsByTagName('li')[0]; addClass(liSelected, 'selected'); } } else if (event.which === 38) { //up if (liSelected) { removeClass(liSelected, 'selected'); index--; console.log(index); next = ul.getElementsByTagName('li')[index]; if(typeof next !== undefined && index >= 0) { liSelected = next; } else { index = len; liSelected = ul.getElementsByTagName('li')[len]; } addClass(liSelected, 'selected'); } else { index = 0; liSelected = ul.getElementsByTagName('li')[len]; addClass(liSelected, 'selected'); } } }, false); function removeClass(el, className) { if(el.classList) { el.classList.remove(className); } else { el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); } }; function addClass(el, className) { if(el.classList) { el.classList.add(className); } else { el.className += ' ' + className; } }; 

 li.selected {background:yellow} 

 
 
Item 1
 
Item 2
 
Item 3
 
Item 4
  

Answer 3

这可能取决于浏览器。 它似乎仅在无线电输入彼此相邻时才起作用（标签也可以）。

但这会破坏Firefox和其他浏览器中的无线电导航：

 
 ... 
 
 ...  

一旦你想要制作比简单列表（类别……）更复杂的东西，这就很烦人了。