В книгах бюро поиск и его результаты появляются в процессе ввода. Во время чтения читатель начинает набирать интересующее его слово, одновременно с первым введённым символом появляется поиск, а затем и его результаты.
Чтобы реагировать на ввод, в Яваскрипте есть три события: 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.