В книгах бюро поиск и его результаты появляются в процессе ввода. Во время чтения читатель начинает набирать интересующее его слово, одновременно с первым введённым символом появляется поиск, а затем и его результаты.

Поиск в «Типографике и вёрстке». При нажатии на «энтер» книга перелистывается к первому результату поиска

Чтобы реагировать на ввод, в Яваскрипте есть три события: keydown, keyup и keypress. Для распознавания ввода keydown и keyup не подходят: по ним нельзя отличить a от A — события всегда ссылаются на символ в верхнем регистре. keypress подходит: возникает, если нажата символьная клавиша, ссылается на правильный символ.

Но keypress срабатывает и при наборе непечатных символов (перевод строки, мягкий перенос) и служебных комбинаций (например ctrl+, на Маке). Чтобы отфильтровать такие символы и открыть попап с поиском, если пользователь действительно ввёл что‑то печатное, используем «пробник». Вставляем то, что ввёл читатель, в ДОМ‑элемент и проверяем его ширину:

// Добавляем пробник в ДОМ
// и скрываем за границей экрана
const $probe = $('<span></span>')
  .css({ position: 'fixed', left: '-1000px', bottom: 0 })
  .appendTo('body')
​
$(document).on('keypress', (event) => {
  // Получаем введенный символ
  const char = String.fromCharCode(event.charCode)
​
  // Вставляем введённый символ в пробник
  // и проверяем его ширину
  if ($probe.html(char).width() > 0) {
    // Обрабатываем ввод печатного символа
  }
})

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы