Как отследить нажатие Ctrl+Enter с помощью jQuery?

· jQuery и Снипеты · 1 мин чтения

Во время создания чата я задался себе вопросом «как можно отследить событие нажатия одновременно двух клавиш Ctrl+Enter с помощью jQuery?». В итоге после недолгого поиска, я нашел интересное решение. Для того, чтобы показать как оно работает, я создал небольшое демо, которое находится ниже. Чтобы проверить как работает демо — просто наведите на поле ввода текста (textarea) и нажмите комбинацию клавиш «Ctrl+Enter» и у вас должно появиться alert оповещение вызванное с jQuery.

Демо

dark

О том как работает демо смотрите ниже в секции «Решение jQuery».

Решение jQuery

Скрипт оказался коротким. В нем всего пять строк (как вы можете увидеть ниже).

// Отслеживание нажатия кнопок
$('textarea').keydown(function(e) {
  if (e.ctrlKey && e.keyCode == 13) {
    alert("Вы нажали Ctrl+Enter!");
  }
});

На первой строке я создаю событие нажатия клавишу с помощью метода .keydown(), внутри пишу function(e). e — это аргумент функции, который означает event (событие) и внутри метода (.keydown()) я начинаю определять разные кнопки клавиатуры. Вторая строка это условие, которые проверяет нажатие Ctrl и Enter. Для проверки кнопок я использовал событие e и далее название или код клавиши.

Для Ctrl — это e.ctrlKey.

Для Enter — это e.keyCode == 13.

И чтобы получить их комбинацию, нужно просто соеденить их с && и в итоге у нас получается следующее if (e.ctrlKey && e.keyCode == 13).

Вывод

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

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

Если у вас остались какие-либо вопросы — пишите их ниже под этой записью.