Javascript: Отслеживание нажатия клавиш на странице
Иногда нужно отреагировать на нажатие клавиш не на конкретонм элементе или в поле ввода, а на странице. Ниже приведу простенький сниппет на данную тему. Он просто отслеживает нажатие сочетания клавиш (горячих клавиш) ctrl + enter.
Данный пример просто выводит алерт с «ОК», дальнейшая реализация может быть на Ваше усмотрение, например можно сделать всплывающее окно для «Если Вы нашли неточность в описании, то напишите нам.»
$(document).keydown(function (e) < if (e.ctrlKey && e.keyCode == 13) < alert("OK"); >>);
Пометки: Если Вы нашли неточность в описании, то напишите нам (можно нажать ctrl + enter).
js как определить какая кнопка нажата
Для определения нажатой клавиши можно использовать событие keydown и свойство event.key .
document.addEventListener('keydown', function (event) if (event.key === 'Enter') console.log('Нажата клавиша Enter'); > else if (event.key === 'Escape') console.log('Нажата клавиша Escape'); > >); В этом примере мы добавили обработчик события keydown на документ. Когда клавиша нажата, функция обработчика будет вызвана и передаст объект события event . Затем мы проверим, какая клавиша была нажата, используя свойство event.key , и выведем сообщение в консоль.
Вы можете использовать любые другие клавиши, проверяя их с помощью if / else if конструкций.
Как отследить нажатия одной кнопки а потом другой?
либо через флаг, что капс был нажат, либо при нажатии капса помещать значение в пул нажатых клавиш и смотреть, что значение пула последнее или имеется в пуле.
29 мар 2020 в 18:52
необходимо отслеживать нажатие на элементе какого типа (input, p, div. )?
29 мар 2020 в 19:30
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Вы можете отследить нажатие caps-lock и нужных клавиш alt + ctrl через keydown .
Так же он работает и с keyup .
При использовании же keyPress Вы не получите event о нажатии.
Соответственно, чтобы проверить нажатие ctrl + alt при включенном Caps-lock — Вы можете воспользоваться следующим решением:
document.addEventListener('keydown', function(event) < var caps = event.getModifierState && event.getModifierState('CapsLock'); if(caps)< if(event.key == 'Alt' && event.ctrlKey)< console.log('Включен Caps-lock, зажат Ctrl и нажат Alt'); >> >);
Отслеживать
ответ дан 29 мар 2020 в 20:52
Denis640Kb Denis640Kb
14k 5 5 золотых знаков 21 21 серебряный знак 46 46 бронзовых знаков
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
JavaScript: Информация О Нажатой Клавише ����
В данной статье рассмотрим, как получить информацию о нажатой клавише клавиатуры или кнопки мыши, а также как выполнять необходимые действия (нужный код) при нажатии определенных сочетаний клавиш или кнопок (правый/левый клик мыши).
Чтобы получить информацию, о том какая кнопка клавиатуры нажимается в данный момент, воспользуемся следующим кодом:
function keyPress(e) < let keyNum; if (window.event) < keyNum = window.event.keyCode; >else if (e) < keyNum = e.which; >console.log(keyNum); > document.onkeydown = keyPress;Номер кнопки находится в переменной keyNum
Узнать keyCode кнопки можете здесь:
Выполнение кода в зависимости от нажатой клавиши
Давайте теперь будем выполнять необходимые действия в зависимости от нажатой клавиши
Для этой задачи воспользуемся оператором switch .
В конструкции case укажите номер кнопки, для которой будет выполнен необходимый код.
document.onkeydown = function (e) < switch (e.keyCode) < case 49: console.log("Нажата единица"); break; case 50: console.log("Нажата двойка"); break; case 32: console.log("Нажат пробел"); break; case 9: console.log("Нажат tab"); break; case 16: console.log("Нажат shift"); break; default: console.log(e.keyCode); >>;Вместо console.log выполняйте необходимые действия.
Если была нажата клавиша, которой нет в списке, то для неё можете выполнить другой код. Писать в default.
Как отследить комбинации нажатых клавиш
Отследить нажатие CTRL, SHIFT и ALT можно также другими способами (данный способ необходим чтобы отследить комбинации).
Например, отследить нажатие CTRL можно следующим образом:
document.addEventListener("keydown", function (e) < if (e.ctrlKey) < console.log("Был нажат CTRL"); document.getElementById("btnClick").textContent = "CTRL"; >>);Используя всю ранее полученную информацию, определим нажатую комбинацию клавиш, например, CTRL + F5 :
document.addEventListener("keydown", function (e) < e.preventDefault(); if (e.ctrlKey && event.key == "F5") < console.log("Была нажата комбинация клавиш CTRL + F5"); >>);Как вы могли заметить, обращаться к клавишам в JavaScript можно несколькими способами. Например, следующие строки кода позволяют нам получить один и тот же результат:
event.key == "F5" аналогично e.keyCode == 116 Мы рассмотрели, как получить информацию о нажатой клавише на клавиатуре. Теперь давайте рассмотрим, как обработать события мыши.
Информация о нажатой кнопке мыши JavaScript
Рассмотрим, как определить какая кнопка мыши нажимается над объектом: левая кнопка, правая или дабл клик.
Выполнение кода при клике левой кнопкой мыши:
document.querySelector(selector).onclick = function (e) < if (e.which == 1) < console.log("Нажата левая кнопка мыши"); >>Выполнение кода при клике правой кнопкой мыши:
document.querySelector(selector).oncontextmenu = function (e)
Выполнение кода при двойном клике по кнопке:
document.querySelector(selector).ondblclick = function ()
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
- JavaScript: Работа с Массивами
- Наличие Динамически Добавленного Элемента
- Стилизация Input File
- Предзагрузка Картинок — Предварительная Загрузка Изображений на JavaScript
- Стилизация Скролла
- События Формы