Как включить навигацию со стрелками на клавиатуре для списка Div с помощью jQuery

Я следую руководству [здесь][1], чтобы создать систему пометки друзей в Facebook. Но в учебнике отсутствует возможность «стрелочной навигации», как в Facebook. Я хотел бы выяснить, как этого добиться.

По сути, когда я ввожу текст в область редактирования контента, он будет генерировать div предлагаемых друзей, как показано ниже:

<div class="display_box">    
   <img src="user_img/John.jpg">
   <a href="#" class="addname" title="John">John</a><br>
   <span>India</span>
</div>
<div class="display_box">    
   <img src="user_img/Peter.jpg">
   <a href="#" class="addname" title="Peter">Peter</a><br>
   <span>USA</span>
</div>
<div class="display_box">    
   <img src="user_img/Mary.jpg>
   <a href="#" class="addname" title="Mary">Mary</a><br>
   <span>UK</span>
</div>

Все они представляют собой элементы div с именем класса display_box. Я могу нажать на поле и выбрать их:

$('div').on("click",".display_box",function(e) {
    // do the stuffs
});

Я хотел бы, чтобы мои пользователи могли использовать клавиатуру, используя клавишу вверх или клавишу вниз, чтобы перемещаться между вариантами выбора, и использовать клавишу ввода, чтобы активировать выбор. Любые идеи, как я могу это сделать? Большое спасибо!


javascript navigation jquery tagging arrow-keys
person user2335065    schedule 26.01.2015    source источник
comment
На самом деле это то же самое, но вы используете не щелчок, а нажатие клавиши или нажатие клавиши или нажатие клавиши, что подходит лучше всего. Если вам нужна непрерывная прокрутка, когда пользователь нажимает, но не отпускает клавишу со стрелкой, используйте, например, keydown. Следующим шагом будет передача другого аргумента внутри функции. Посмотрите этот ответ, чтобы узнать код клавиши [stackoverflow.com/questions/2220196/, а затем поищите в Google таблицу символов, чтобы узнать, какая клавиша была нажата. GL с вашим проектом!   -  person jPO    schedule 26.01.2015

Ответы (1)


arrow_upward
6
arrow_downward

Вам нужно привязать события клавиатуры keyup/keydown , а затем соответствующим образом изменить css, чтобы создать ощущение move up или move down :

используйте keyup, если вы хотите сделать один ход даже при нажатии клавиши, независимо от того, долго ли она нажата.

используйте keydown, если вы хотите двигаться по циклу, пока пользователь держит ключ.

$("#search").keyup(function(e) 
{
        if (e.keyCode == 40) 
        {  
            Navigate(1);
        }
        if(e.keyCode==38)
        {
            Navigate(-1);
        }

});

Проверьте полный код @fiddle: http://jsfiddle.net/MKZSE/77/

person Vijay    schedule 26.01.2015