Как я могу реагировать на 2 нажатия клавиши как на одно нажатие?

Я делаю что-то вроде «Системы информации о сотрудниках для клиентов», используя HTML и CSS. Сделал пока без проблем.

Основная задача системы:

Заказчик читает обязанности и имя сотрудника, перемещая список вверх. Если он / она находит участника, он нажимает соответствующую клавишу на клавиатуре или щелкает номер на панели номеров.

Системный интерфейс

Страница сведений об участнике

Нет проблем, если покупатель «нажимает» кнопку. Но, если он выбрал клавиатуру, возникает проблема. Потому что в нашем штате 20 человек. Клиент может нажимать цифры от 1 до 9. Мне нужно разрешить клиенту нажать 10, 11, ..., чтобы получить доступ к новой странице с подробной информацией об этом члене.

Я не мог найти никакого решения в Google. Пожалуйста, дайте мне знать, как решить эту проблему.

Спасибо.

Если пользователь нажимает 1, как узнать, что это пользователь №1 или пользователь №17, который еще не нажимал 7? Задержка? Или вы потребуете, чтобы пользователь №1 ввел 01? И, по-видимому, вы имеете в виду не «однократное нажатие», а «последовательность нажатий клавиш» - если вы требуете, чтобы они нажимали цифры одновременно, одна из проблем заключается в том, что №11 не может войти в систему. Если у вас есть сотрудники двадцать, может быть легче дать им буквы, чем цифры?

Amadan 10.10.2018 08:52

@NH Darshana Prasad Gunarathna вы можете отслеживать непрерывно нажатые клавиши в определенное время. Допустим, вы хотите ввести 20, вы можете отслеживать нажатие клавиш 2 и 0 сразу после друг друга с разницей во времени в 5 секунд. И нажатая клавиша должна быть целым числом, а не строкой.

Vishal Pachpande 10.10.2018 08:53
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
55
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать setTimeout (), чтобы подождать и проверить, не произойдет ли еще один ключ в течение некоторого времени. Это означает, что при нажатии первой клавиши вы запускаете функцию, чтобы подождать и посмотреть, собирается ли пользователь нажать другую клавишу.

Например, когда пользователь нажимает 1, вы вызываете setTimeout () и ждете 3 секунды. Если в течение 3 секунд пользователь не нажал другую клавишу, то мы предполагаем, что пользователь намеревался ввести 3. Однако, если пользователь нажимает больше, это будет объединено с предыдущей клавишей (клавишами). Итак, если пользователь нажал 7 в течение 3 секунд, мы будем считать, что пользователь намеревался ввести 17.

Вы также можете сделать это для большего количества цифр, используя тот же метод.

Вместо использования setTimeout лучшим решением было бы использовать метод debounce, предоставляемый lodash. Об этом можно прочитать здесь: lodash.com/docs/#debounce

dRoyson 10.10.2018 10:09

Другие вопросы по теме

Похожие вопросы

Многократный запуск обработчиков маршрутов - ExpressJS
Элемент SVG сломался при обновлении до SVG 2, почему?
Ссылаясь на локальную переменную класса внутри метода, который находится в объекте, находящемся в том же классе
Ошибка в функции JQuery для проверки обязательных полей в настраиваемых раскрывающихся списках
Реагировать нативно, как получить сведения о людях или пригласить приложение Реферал, опубликованный через ShareVia API всех приложений
OwlCarousel2 показывает пустые слайды, в то время как все остальные HTML-теги отображаются нормально
Отличается ли примитивная функция, возвращаемая другой функцией, от примитивной функции в JS?
Как обновить / перезагрузить приложение angular 2 без использования window.location.reload ()?
Как передать значения поля ввода массива из javascript? я заполняю только 1-е значение
Определение свойств одностраничного компонента Vue с помощью v-for