Как реализовать навигацию между <span> с помощью клавиш со стрелками?

Я создаю свой собственный combobox для лучшего дизайна, чем тег <select>. Кстати, я хочу знать, как сделать навигацию с помощью клавиш со стрелками клавиатуры между (или другим ...) и отобразить предложения с помощью клавиши "tab", Как тег <option> тега </option></select>.

Здесь я хотел бы заставить его работать:

HTML

<div id="myDiv">
 <span>Value 1</span> 
 <span>Value 2</span>
 <span>Value 3</span>
</div>

CSS

#myDiv {display:none;border:1px solid #000;}
span {display:block;background:#EDEDED;cursor:pointer;}
span:hover {background:#555;color:#FFF;}

JS

$(document).ready(function(){
 $('#*******').focus(function(){
 $('#myDiv').slideDown();
 }); 
 $('span').click(function(){
 $('#*******').val($(this).html());
 $('#myDiv').slideUp();
 });
});​

Вы можете протестировать его здесь: http://jsfiddle.net/eHpKX/2/

Пример редактирования: например, щелкнуть или вкладку ввода, а затем использовать клавиши со стрелками для навигации... Это не работает.

Любая помощь будет оценена.

1 ответ

Я написал обработчик keydown для uparrow и downarrow, чтобы действовать, как выбрать drop down. Однако ключ tab имеет определенную роль при переходе в следующее поле, поэтому я не хотел, чтобы поведение браузера prevtDefault. См. Ниже код, и вы можете построить его больше оттуда,

DEMO

CSS

span.active {background:#555;color:#FFF;}

JS:

$(document).ready(function() {
 $('#*******').focus(function() {
 if ($('#myDiv span.active').length == 0) {
 $('#myDiv span:first').addClass('active');
 }
 $('#myDiv').slideDown();
 }).focusout(function() {
 $('#myDiv').slideUp();
 });
 $('span').click(function() {
 $('#*******').val($(this).html());
 }).mouseenter(function() {
 $('#myDiv span').removeClass('active');
 }).keydown(function(e) {
 alert(e.which);
 });
 //keydown event
 $('#*******').keydown(function(e) {
 var $actvOpt = $('#myDiv span.active');
 if (e.which == 13) { //enter key
 if ($actvOpt.length != 0) {
 $(this).val($actvOpt.text());
 $('#myDiv').slideUp();
 }
 return;
 }
 var actvIndex = $actvOpt.removeClass('active').index();
 var optCount = $('#myDiv span').length;
 if (e.which == 40) { //keydown
 actvIndex += 1;
 } else if (e.which == 38) { //keydown
 actvIndex -= 1;
 }
 if (actvIndex < 0) actvIndex = optCount - 1;
 else if (actvIndex >= optCount) actvIndex = 0;
 $('#myDiv span:eq(' + actvIndex + ')').addClass('active');
 $actvOpt = $('#myDiv span.active');
 $(this).val($actvOpt.text()); 
 });
});

licensed under cc by-sa 3.0 with attribution.