jquery событие нажатия кнопки

В статье опишу реализацию обработчика событий на javascript и jquery. Принимая в расчет популярность библиотеки jquery — начнем реализацию ее методами. По моей задумке функция переключения триггера «показать/скрыть форму»

Допустим вы не хотите, чтобы посетители случайно нажали клавишу Enter и отправили форму. Можно использовать этот фрагмент, чтобы отключить нажатие клавиши Enter в формах.

Событие по нажатии двух клавиш клавиатуры

Представьте, что вы разрабатываете движок для сайта с админкой. На сайте нет понятия «регистрация» и зарегистрированные пользователи. Царь и бог на нем только один — бородатый и бухой админ. Как бы вы сделали авторизацию для администратора сайта. Предусмотрели бы линк по типу http://адрес_сайта/admin? Меня этот вариант не устроил. Я решил сделать невидимый блок с формой авторизация, который становится видимым при нажатии сочетания двух клавиш на клавиатуре. Передомной встала задача написать обработчик на Jquery и javascript.

В статье опишу реализацию обработчика событий на javascript и jquery. Принимая в расчет популярность библиотеки jquery — начнем реализуацию ее методами. По моей задумке функция переключения триггера «показать/скрыть форму». Стоит избегать таких сочетаний клавиш как ctrl+c/v/x. В своем примере я обрабатываю нажатие клавиш ctrl+q. Нам потребуется узнать коды клавиш. Позже я выложу таблицу с кодами клавиш. Итак, вот код реализации моей задумки:

Используя методы keydown() и keyup() мы отслеживаем нужные нам события, проверяем коды клавиш и запускаем определенные функцие: либо show(), либо hide() Так же я устанавливаю переменные куки. Делаю это для того, чтобы запоминать текущее положение тригера и подставлять его при переходе на другую страницу сайта.

Реализовать подобное на javascript можно следующим образом:

Я рекомендую использовать вариант с jquery в виду кроссбаузерности этой библиотеки.

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

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

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

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

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

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

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

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

.click([fn])

.dblclick([fn])

.hover(handlerIn, handlerOut)

Симулирует hovering — отслеживание входа указателя мыши в пределы объекта и выхода за его пределы.

Всякий раз, когда указатель мыши оказывается поверх объекта, вызывается функция, переданная в качестве первого аргумента.

Аналогично, когда указатель мыши выходит за пределы объекта — вызывается функция, которая является вторым аргументом. В следующем примере в конце каждого элемента списка добавляется три звездочки (конечно в тот момент, когда над ним находится указатель мыши).

.mousedown([fn])

.mouseup([fn])

.mouseenter([fn])

.mouseleave([fn])

.mousemove([fn])

Связывает функцию с событием mousemove для каждого элемента набора.
Событие mousemove обычно вызывается, когда указатель мыши перемещается поверх элемента.

Обработчик события принимает один аргумент — объект события, в свойствах clientX и clientY которого представлены координаты указателя мыши.

В этом примере показываем координаты указателя мыши в то время, как указатель перемещается над элементом div.

Примите во внимание, что здесь пример демонстрируется во фрейме, поэтому координаты курсора высчитываются относительно этого фрейма.

.mouseout([fn])

.mouseover([fn])

Событие mouseover обычно вызывается, когда указатель мыши находится в пределах элемента.

В этом примере показываются сообщения, когда происходят события mouseover и mouseout.
Событие mouseout вызывается, когда указатель мыши перемещается в/из дочернего элемента, тогда как для mouseleave этого не происходит.

.toggle(fn, fn1)

Переключается между двумя функциями, которые по очереди вызываются каждым следующим кликом.
Каждый раз, когда клик совершен на выбранном элементе, срабатывает первая функция.
Если на том же элементе совершен еще один клик — срабатывает вторая функция.
Каждый следующий клик продолжает переключение между этими двумя функциями.

Можно использовать unbind(«click»), чтобы отменить действие toggle().

В следующем примере мы применяем и следующим кликом отменяем стили для каждого элемента списка.

.keydown([fn])

Событие keydown обычно вызывается, когда на клавиатуре нажата какая-либо клавиша.

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

.keyup([fn])

.keypress([fn])

Событие keypress обычно вызывается, когда на клавиатуре была нажата какая-либо клавиша.
Событие keypress определяется как keydown + keyup на какой-либо клавише.

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

.blur([fn])

.focus([fn])

Устанавливает обработчик получения фокуса, либо, запускает это событие.

Чтобы при загрузке страницы сразу передать фокус элементу с идентификатором ‘login’, сделайте следующее: Чтобы запретить пользователю писать что-либо в поле ввода, сделайте так: В этом примере как только элемент input получает фокус, отображается следующий сразу за ним элемент span и в течении одной секунды «затухает».

.focusin([fn])

.focusout([fn])

.select([fn])

Устанавливает обработчик выделения текста внутри элемента или , либо, запускает это событие.

Чтобы вызвать событие select для всех элементов input, попробуйте сделать так: Чтобы выполнить какие-либо действия, когда выделяется текст в элементах ввода текста:

.submit([fn])

Устанавливает обработчик отправки формы на сервер, либо запускает это событие.

Чтобы вызвать событие submit для первой формы на странице, надо сделать так: Чтобы предотвратить отправку формы, если какая-либо переменная не установлена, сделайте: Или более подробный пример на ту же тему: