Действие по нажатию клавиши в JQuery

Действие по нажатию клавиши в JQuery

В JQuery есть классная возможность выполнять действия, например запуск скрипта, по нажатию клавиш на клавиатуре пользователя. Это может быть полезным для создания программ, ну или перехода по основным разделам сайта.

Рассмотрим три способа:

keyup - Устанавливает обработчик возвращения клавиши клавиатуры в ненажатое состояние, либо, запускает это событие. Работает с английской и русской раскладкой клавиатуры одинаково!

keydown - устанавливает обработчик перехода клавиши клавиатуры в нажатое состояние, либо, запускает это событие. Работает с английской и русской раскладкой клавиатуры одинаково!

keypress - Не очень. Работает только с одной раскладкой

Теперь рассмотрим 3 примера:

<script>
$(document).ready(function() {
//keyup() - работает при отпускании нажатой кнопки
$(document).keyup(function(e){
if (e.which == 68) { $("#dave").slideToggle("slow"); } }); //клавиша D

//keydown() - устанавливает обработчик перехода клавиши клавиатуры в нажатое состояние, либо, запускает это событие.
$(document).keydown(function(e){
if (e.which == 83) { $("#save").slideToggle("slow"); } }); //клавиша S

//keypress() - хуже способ
$(document).keypress(function(e) {
if(e.which == 97) $("#aave").slideToggle("slow"); }); //клавиша A
});

</script>

Скачать готовый пример, который визуально отобразит нажатие клавиш в вашем браузере

Во всех примерах запускается действие плавного выдвижения панели. Таблица соответствия JQuery для нажатых клавиш при методе keyup() и keydown() представлена ниже. Код нужной клавише  находится только в столбике Dec! (Клавиша Ctrl – 17):

asciifull

| | Действие по нажатию клавиши в JQuery | В JQuery есть классная возможность выполнять действия, например запуск скрипта, по нажатию клавиш на клавиатуре пользователя. Это может быть полезным |

Один комментарий на “Действие по нажатию клавиши в JQuery”

  1. Александр:

    Круто! Очень пригодилось. Теперь могу за счет этой табличке контролировать любую клавишу, которую нажмет пользователь и в зависимости от нее выполнять свои функции. Для моего сайта использовал как возможность быстрой распечатки страницы при нажатии на клавишу P.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>