LINUX.ORG.RU
Форум — Web-development  

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

 , , ,


0

1

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

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

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

'use strict';

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

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

Последнее исправление: Deleted (всего исправлений: 6) 

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

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

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

нет

Noob_Linux ★★★★
()

Делай просто 

document.addEventListener('keydown', console.log);
Когда хочешь потестить такие колбеки. Сразу будет видно что там за структура и что она выдаёт.

crutch_master ★★★★★
()

Вот, например мой код для 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 ★★
()

Удобно все же согласитесь?

Нет.

beaver ☆
()

Неудобно.

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

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

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

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

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

CryNet ★★★★★
()

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

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

EmgrtE ★★★★
()
Ответ на: комментарий от Noob_Linux

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

нет

dem ★★
()

Удобно все же согласитесь?

нет

gammaray
()
Ответ на: комментарий от dem

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

Noob_Linux ★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development