Задать вопрос
@glu-dimaz

Сканирование QR в поле input. Как реализовать блокировку нажатия клавиш клавиатуры?

Есть поле поиска на странице. Изначально оно выполняет функцию поиска авто по VIN номеру. Пользователь вбивает в него VIN и с помощью jquery выводятся результаты по запросу в таблицу. Захотели в него сканировать QR коды. В QR который сканируют, по мимо необходимого VIN номера - есть еще и другие строки. Логика обработки данного поля следующая:
$('input[name=search_content]').keyup(function(event) {
			var v = this.value;
			console.log(v);
			var res = v.slice(0, 2);
			if(res == '1/'){
				searchQr(this.value);
				this.value = '';
			} else {
				if(event.keyCode == 13) {
					show_stage(1);		
				}
			}
		});

Данные из QR всегда начинаются на "1/". Исходя из этого и условие, что если значение поля начинается с "1/" - то выполняем один скрипт, который обрабатывает эту строку на уровне PHP, извлекает из нее VIN номер и далет по нему запрос к БД и уже выдает ID записи из базы конкретного авто.

В чем проблема изначально. В QR код зашито по мимо строки набор клавиш(или обновить страницу или открыть справку), но есть и QR и без этих горячих клавиш. Какой подход можно найти к решению данной задачи? Блокировать клавиатуру при фокусе поля? нет - потому что поле используется еще как ручной поиск.
  • Вопрос задан
  • 148 просмотров
Подписаться 1 Средний 13 комментариев
Пригласить эксперта
Ответы на вопрос 2
Fragster
@Fragster
помогло? отметь решением!
Для клавиатурных сканеров есть рабочее решение https://github.com/FragsterAt/barcode_hid_reader
Отлавливает сканирование НЕ в поле ввода (специально, пусть пользователь вводит руками что нужно, если нужно изменить - то можно по энтеру или блюру анализировать содержимое), в обработчике события сканирования можно со штрихкодом делать что нужно (а можно вообще тупо свой коллбэк передать при инициализации, тогда события не будет, а будет просто вызываться функция).

Проверка тут https://fragsterat.github.io/barcode_hid_reader/te...

По поводу зоопарка сканеров - клавиатурные работают +- одинаково, единственное - при доступе по RDP на медленном канале или совсем старом железе нужно немного увеличить таймаут.
Ответ написан
@glu-dimaz Автор вопроса
let lastInputTime = 0;
		let isScannerInput = false;
		$('input[name=search_content]').on('keydown', function(event) {
			clearTimeout(inputTimer);
			let now = Date.now();
			if (now - lastInputTime < 50) { // Если разница между нажатиями маленькая, считаем, что это сканер
				isScannerInput = true;
			} else {
				isScannerInput = false;
			}
			lastInputTime = now;
			if (isScannerInput) {
				event.preventDefault();
				event.stopPropagation();
			}
    		inputTimer = setTimeout(function(field) {
				var v = $('input[name="search_content"]').val();
				var res = /\/+/g.test(v);
				if(res){
					searchQr($('input[name="search_content"]').val());
					$('input[name="search_content"]').val('');
				} else {
					if(event.keyCode == 13) {
						show_stage(1);		
					}
				}
			}, 500);
		});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

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