Добавление сочетания клавиш на веб-страницу

В настоящее время у каждого есть мышь, сенсорная панель или что-то подобное для перемещения по веб-странице. Но сочетание клавиш по-прежнему является отличным элементом веб-страницы для пользователей. Особенно для постоянных пользователей сайта, которые точно знают, что на какой странице. В этой статье я хотел бы объяснить, как этого добиться. Для этого я использовал Jquery и базовый код Javascript.

Событие нажатия клавиши

Сначала нам нужно поймать событие keydown на странице, как показано ниже:

$(window).keydown(function(event) {
    // code goes here…..
});

где объект события содержит ключевые детали.

event.keyCode

Свойство event.what нормализует event.keyCode и event.charCode. Рекомендуется смотреть event.which для ввода с клавиатуры. event.which также нормализует нажатия кнопок (mousedown и mouseupсобытия), сообщая 1 для левой кнопки, 2 для средней и 3 для правой.

event.ctrlKey

«event.ctrlKey» сообщает нам, нажал ли пользователь клавишу «Ctrl» или нет. Эта функция возвращает логическое значение (true/false).

Круто, теперь мы можем приступить к написанию логики для обработки событий.

Шаг 1. Включите JQuery

<script src=”https://code.jquery.com/jquery-3.3.1.js" ></script>

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

Шаг 2. Создайте элемент

<input type=”button” name=”btn1" class=”btn1" value=”Button” />

Шаг 3. Событие клика

Добавьте приведенный ниже код, который показывает предупреждение при нажатии кнопки.

$(‘.btn1’).click(function(e) {
    alert(“Hey, you clicked the button!”);
});

Шаг 4. Обработка нажатия клавиши

Как обсуждалось выше, метод «keydown» Jquery помогает нам обрабатывать нажатия клавиш пользователем. В этом примере я хотел бы инициировать событие нажатия кнопки, когда пользователь нажимает клавишу F2.

if(event.which == 113) { 
   $(‘.btn1’).click();
   event.preventDefault();
   return;
}

где «113» — это код клавиши F2 на клавиатуре. Когда пользователь нажимает клавишу F2, нам нужно просто инициировать событие нажатия на кнопку, что мы уже сделали на шаге 3.

Ууууууу, это все, что нам нужно сделать :)

Полный рабочий пример:

Пожалуйста, скопируйте и вставьте приведенный ниже полностью рабочий HTML-код.

Удачного кодирования :)