Сочетание клавишей в javascript

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

Захотелось мне в своем проекте использовать горячие клавиши для управления содержимым. Нажал esc — закрылось диалоговое окно, ctrl+left — открылся следующий раздел… Порылся в гуглях-яндексах и, не найдя идеала, решил написать свое решение.
Теперь оно у меня есть — маленькое, легкое, независимое от от других библиотек.
Мне достаточно подключить javascript-файл и написать

Подробнее о возможностях

Функция $e()

$e(param0 [[, param1 [, param2… ] ] )
Функция принимает список горячих клавиш (независимые от регистра, через пробелы или «+»), на которые вы хотите повесить действие.
Понимает: alt, shift, ctrl, meta, esc, enter, up, down, left, right, tab, space, pageup, pagedown, home, end, буквы латинского алфавита (a-zA-Z), цифры (0-9), символьные коды (10-128);
Кроме того, есть специальные слова keyup, keydown, keypress, которые указывают на какое действие реагировать (по-умолчанию — keyup).
Необходимо помнить, что браузеры могут вызывать или не вызывать события в зависимости от его типа.
Возвращает контекст.

Функция .bind()

.bind(param)
Пинимает функцию или javascript, который назначится сочетанию клавиш, переданным функцией $e().

Функция .unbind()

.unbind([param])
Отвязывает действие от сочетания клавиш, переданного функцией $e().
Если параметр пустой, то от этого сочетания отвяжутся все действия.

Функция $e.start()

Запускает прослушивание клавиш.
Послушивание также включается само, при использовании функции .bind().

Функция $e.stop()

Останавливает прослушивание клавиш.

* This source code was highlighted with Source Code Highlighter .

Источник

#17 Сочетания клавиш на JavaScript, пишем функцию и практикуемся

В этом уроке мы рассмотрим основные события клавиатуры и научимся с ними работать. Напишем функцию для отслеживания любых сочетаний клавиш, попрактикуемся и рассмотрим в чем отличие между кодом и символом. ❕ Файлы к уроку: https://drive.google.com/file/d/18bV4L77XSEXb2VQEeWtcVYgB9K5L9ODd/view?usp=share_link Уроки по языку JavaScript собраны в одном плейлисте для вашего удобства. Тут вы сможете легко выучить язык JavaScript начиная с основ. 📌 Уроки по JavaScript: https://www.youtube.com/playlist?list=PLuY6eeDuleINoCQtGZsMoVVCSgEH7gKQ5 Данный плейлист включает в себя видео лекции из курса «Frontend разработчик на HTML, CSS и JavaScript». Задания, тесты и другие полезные материалы к этому курсу можно получить в курсе на Stepik. 📌 Курс «Frontend разработчик на HTML, CSS и JavaScript»: https://stepik.org/a/113402 00:00 Вступление и краткий анонс 00:41 Курс Frontend разработчик 01:07 Коды и символы клавиш 04:16 Проверка клавиш CTRL+Z 06:42 Функция сочетания клавиш ⚡️ Эксклюзив на Boosty — https://boosty.to/itdoctor 💡 Telegram канал — https://t.me/itdoctor_official/4 🎥 Курсы на Stepik — https://stepik.org/users/387773773/teach 💰 Донаты на ЮMoney — https://sobe.ru/na/itdoctor ВКонтакте — https://vk.com/itdoctorstudio Яндекс Дзен — https://zen.yandex.ru/itdoctor #javascript #js #jsevents #events #itdoctor

Источник

Горячие клавиши на JavaScript

Уважаемые пользователи! Мы благодарим Вас за то, что Вам интересен нашен контент, поэтому с каждым днем хотим становиться все лучше и лучше!

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

Возможно, имеются люди, которые задаются этим вопросом, что же такое горячие клавиши? Отвечу Вам просто, на обычном примере. Допустим, Вы печатаете текст в поле textarea, затем нажимаете клавишу Enter и при ее нажатии режим каретки переходит вниз, но вместо этого Вам нужно, чтобы письмо уже отправлялось. Для этого существует код каждой клавиши, которую можно вызвать запросом, отсюда и название — горячие клавиши. То есть, с помощью одной клавиши, Вы можете перепрограммировать сам запрос обращений к исходному элементу. Реализуется данный функционал с помощью языка веб программирования JavaScript. Сразу хочу отметить, что в данном уроке мы лишь рассмотрим практические примеры, которые возможно Вам пригодятся. Следующий урок уже будет по разработке такого скрипта, как в контакте. Кто пользуется данной социальной сетью, может посмотреть, как это работает. В личных сообщениях, при наведении на кнопку отправить, выводится маленькое модальное окно, в котором есть режимы выбора данной возможности горячих клавиш. Кто же не пользуется социальной сетью, то ниже приведен скриншот данного скрипта.

Начинаем с первого шага и подключаем наш скрипт горячих клавиш dershortcut.js, а также не забываем про стили demo.css.

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

Заметьте, что сначала создается форма с обязательным именем form, тег атрибута fieldset тоже является обязательным, так как без него поля при нажатии на клавишу Enter не будет переключаться должным образом между собой, используя событие клавиатуры onKeyPress. У каждого поля, как видим имеется свое значение и функция. Для поля textarea также имеются события перехвата ввода с клавиатуры onKeyDown и onKeyUp, но с ними мы познакомимся позже, во втором шаге, где подробно расписан код JavaScript. Кстати, не забываем предать стили нашей форме, чтобы она корректно отображались.

#content < padding: 50px; margin: 0 auto; width: 300px; >input[type=»text»], textarea < width: 300px; border: 1px solid #000000; padding:10px; margin-bottom: 10px; >input[type=»submit»] < border:none; background: none; color:#FFFFFF; >fieldset

Переходим ко второму шагу и тут мы ознакомимся с принципом реализация JavaScript кода для назначения горячих клавиш. И так, для этого я создал специально четыре переменные, которые являются нашими часто применяемыми клавишами. Первая переменная enter в которой находится число 13. Так вот, данное число и является кодом данной клавиши при нажатии. Остальные тоже аналогично — shift, ctrl, alt и capslock. Перед этим нам необходимо прописать функцию KeyDown со значением event, которая будет относиться к полю textarea по событию onKeyDown.

var enter = 13; var shift = 16; var ctrl = 17; var alt = 18;

Далее создаем переменную text и записываем в нее получение от поля textarea, какой-либо передачи данных при введении и отправке текста. В поле идентификатора text, также не забываем убрать лишние переносы строк с помощью функции replace.

var text = document.getElementById("text").value; text = text.replace(/\s/g, '');

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

event = event || window.event; if(event.keyCode != enter && event.keyCode != shift && event.keyCode != ctrl && event.keyCode != alt && event.keyCode != capslock) < return; >if (event.preventDefault) < event.preventDefault(); >else

Когда проверку мы сделали и задали переменные, нам осталось сделать две последних проверки, первая из которых клавиша отправки сообщения должна быть enter, а вторая, проверяет длину текста, которая должна быть боль ноля.

if(event.keyCode == enter && text.length > 0)

Теперь можем смело переходить к другим горячим клавишам, таким как alt, shift, ctrl и capslock. Для начала нам потребуется условие, которое будет утверждать значение нажатой клавиши capslock.

Далее при нажатии клавиши ctrl мы добавляем в поле textarea теги , при нажатии alt добавляем тег переноса , при сочетании нажатий двух клавиш shift и capslock мы добавляем текст «ROOTHELP.RU — СКРИПТЫ ДЛЯ САЙТА!«.

else if(event.keyCode == ctrl) «; > else if(event.keyCode == alt)< document.getElementById("text").value += "
«; > else if(event.keyCode == shift && capslock)

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

И на последок, не плохо было бы сделать переключения между полями — имя, фамилия, сообщения через клавишу Enter. Делается это все через функцию KeyPress с двумя значениями event и fields. Первое общение значение KeyCode, а второе используется для конкретного поля. Уместно употребить тут событие focus, ведь с помощью него и скрипт переключается между элементами полей.

function KeyPress(event,fields) < var keys = navigator.appName == "Netscape" ? event.which : event.keyCode; var enter = 13; if (keys == enter)< document.form.elements[fields].focus(); return false >return true >

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

function keyDown(event) < var enter = 13; var shift = 16; var ctrl = 17; var alt = 18; var text = document.getElementById("text").value; text = text.replace(/\s/g, ''); if(event.keyCode == 20)< capslock = true; >event = event || window.event; if(event.keyCode != enter && event.keyCode != shift && event.keyCode != ctrl && event.keyCode != alt && event.keyCode != capslock) < return; >if (event.preventDefault) < event.preventDefault(); >else < event.returnValue = false; >if(event.keyCode == enter && text.length > 0) < document.getElementById("button").click(); >else if(event.keyCode == ctrl) "; > else if(event.keyCode == alt)< document.getElementById("text").value += "
"; > else if(event.keyCode == shift && capslock) < document.getElementById("text").value += "ROOTHELP.RU - СКРИПТЫ ДЛЯ САЙТА!"; >> function keyUp(event) < if(event.keyCode == capslock)< capslock = false; >> function KeyPress(event,fields) < var keys = navigator.appName == "Netscape" ? event.which : event.keyCode; var enter = 13; if (keys == enter)< document.form.elements[fields].focus(); return false >return true >

Источник