x
 
Егор Георгиевич
15 августа 2019
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Василий, привет!

Я хорошо представляю, как в JS обрабатывать горячие клавиши: Ctrl+I, Ctrl+G и прочие. Но не могу понять, как отслеживать и обрабатывать их последовательность, например, если нужно вводить пароли или чит-коды вслепую, без поля для ввода.

Как это сделать? С какой стороны подойти к задаче?


Егор!

Отсле­жи­вайте все нажа­тия кла­виш и соби­райте их в про­ме­жу­точ­ный буфер до тех пор, пока в буфере не полу­чится иско­мый пароль или чит‑код:

// Как быстро забы­вать ввод. Ждём 2 секунды: если нажа­тий на кла­виши нет,
// счи­таем, что ввод окон­чен
const INPUT_THRESHOLD = 2000
​
function onCheatCode(cheatCode, callback) {
  // В buffer соби­раем то, что полу­ча­ется
  let buffer = []
  let lastInputAt
  ​
  document.addEventListener('keydown', (event) => {
    const key = event.key.toLowerCase()
    const currentTime = Date.now()
    ​
    if (currentTime - lastInputAt > INPUT_THRESHOLD) buffer = []
    ​
    // Добав­ляем нажа­тую кла­вишу в буфер
    buffer.push(key)
    lastInputAt = currentTime
    ​
    // Если буфер сов­пал с кодом, очи­щаем буфер и вызы­ваем колбэк
    if (buffer.join('') === cheatCode) {
      buffer = []
      return callback()
    }
  })
}
​
onCheatCode('power overwhelming', () => location.href = 'https://youtu.be/AJKx1XDBqNo')

Сове­тую полу­чив­шийся код опти­ми­зи­ро­вать для вашей задачи. Ска­жем, если чит‑кодов много, лучше исполь­зо­вать один обра­бот­чик keydown на все чит‑коды, а не по обра­бот­чику на каж­дый код. Если на стра­нице есть тек­сто­вые поля, стоит игно­ри­ро­вать ввод в них, опи­ра­ясь на event.target.tagName.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор закрыт. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Комментарии

Юрий Хан
15 августа 2019

Если вы обрабатываете keydown или keypress на странице, то после того, как вы решили, что эта клавиша — ваша, обязательно нужно сделать event.preventDefault(). Иначе клавиша после вашей обработки провалится в браузер и будет обработана ещё и в нём.

В Firefox, например, есть настройка Preferences → General → Browsing → Search for text when you start typing. Когда она включена, ввод текста поднимает поисковую панель и запускает поиск.

Соответственно, если ваш обработчик забыл погасить за собой событие — у меня всплывёт поиск. Все дальнейшие нажатия пойдут в поисковую строку, и я не смогу набрать чит-код.

Антон Лях
18 августа 2019

Чит-коды видны в коде, если посмотреть исходник скрипта. А можно ли как-то спрятать их от просмотра?


20 августа 2019

Антон, можно хранить хеши кодов:
js onCheatCode('03747b8c8f911cdd095ca47e0094d11c58e86661ce613e6a953dcb6b9e808744', () => location.href = 'https://youtu.be/AJKx1XDBqNo')

 

И сравнивать их с хешем буфера:

js /* ... */ if (hash(buffer.join('')) === cheatCode) { buffer = [] return callback() } /* ... */


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

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

Вот такой веб 2.0.

Вы используете Зеплин? 1 Несколько месяцев назад меня повысили из обычного разработчика до «тимлида» 1 Как правильно, эффективно и уважительно ставить KPI? Как готовить макеты для технологов? 6




Недавно всплыло

2 Как совместить информационный стиль и текст для поисковиков? 7 2 Хочу научиться сторителлингу 2