LINUX.ORG.RU

Как на javascript сделать горячие клавиши на сайте?

 , , ,


0

1

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

Я хочу такую горячую клавишу, когда посетитель заходит на сайт и он смог горячей клавишей «пробела» затемнить цветовую схему сайта. Удобно все же согласитесь?

Набросал немного говнокода, но когда нажимаю «пробел» код не работает. Браузер Chrome.

'use strict';

document.addEventListener('keydown', (event) => {
  const keyName = event.key;

  if (keyName === 'Space')
    alert('это alert только для теста')
    return;
});

document.addEventListener('keydown', (event) => {
  event.preventDefault();
  if (event.keyCode === 32)
    alert('это alert только для теста')
    return;
});

Дальше сам https://learn.javascript.ru/keyboard-events

он смог горячей клавишей «пробела» затемнить цветовую схему сайта. Удобно все же согласитесь?

нет

Noob_Linux ★★★ ()

Вот, например мой код для play/pause в плеере, прокрутки стрелками (разной скорости) и изменения размера как на ютубе:

function keyboardListener(event) {
	if (!composer.currentPlayer) {
		return;
	}
	let multiply = false;

	switch (event.keyCode) {
		case 32:
			composer.currentPlayer.playSwitch();
			event.preventDefault();
			break;
		case 38:
			multiply = true;
		case 39:
			composer.currentPlayer.shiftFrame(true, multiply);
			event.preventDefault();
			break;
		case 40:
			multiply = true;
		case 37:
			composer.currentPlayer.shiftFrame(false, multiply);
			event.preventDefault();
			break;
		case 86:
			composer.switchPlayerSize();
			break;
		default:
			break;
	}
}
WitcherGeralt ★★ ()

Неудобно.

На память не помню, но key для пробела может быть, внезапно, просто пробелом.

И если ты забудешь про event.preventDefault(), то тебя впереди ждёт много нового и интересного.

Также ты не проверяешь, что никакие модификаторы не нажаты, что тоже, определённо, доставит твоим посетителям в будущем.

anonymous ()
document.addEventListener('keydown', (event) => {
  event.preventDefault();

То есть посетители даже поиском не смогут воспользуются. Хоть где нужен пробел как пробел, то снять addEventListener не забудь.

CryNet ★★★ ()

Если нет фокуса на поле, ссылке, кнопке и т.д., то пробел в браузерах используется для прокрутки страницы аналогично pgdn. Поэтому идея использовать пробел, да еще и без модификатора - плохая.

Ну и советую посмотреть на разницу keydown и keyup.

EmgrtE ★★★ ()