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

Question

[glu-dimaz]

Есть поле поиска на странице. Изначально оно выполняет функцию поиска авто по 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 и без этих горячих клавиш. Какой подход можно найти к решению данной задачи? Блокировать клавиатуру при фокусе поля? нет - потому что поле используется еще как ручной поиск.

Comments

[rPman]

как вызывается сканер? почему в него нельзя зашить весь анализ и не блокировать ввод в поле ввода?

[glu-dimaz]

rPman, потому что если у компании примерно 40% сотрудников будет пользоваться разными сканерами - зачем мне поддерживать их работоспособность , прошивать и костылять - если я заранее знаю, что заблокировав ввод с клавиатуры - я решу проблему. При том, перечитав мой вопрос более внимательно - данное поле так же используется для ручного ввода поиска. Полностью блокировать его, когда оно в фокусе - не пойдет.

Это что то из ряда - когда у тебя не работает левая колонка, и ты вместо того чтобы пропаять контакты к динамику - идешь и ковыряешь усилитель, чтобы он через 1 гнездо на 2 колонки звук раскидывал...

[rPman]

я понял, сканер у вас ручной, представляется в системе как клавиатура

предложение в лоб, для принятия решения смотрите тайминги между нажатиями кнопок, если слишком быстро и равномерно вбивают - это сканер

и уж точно не надо БЛОКИРОВАТЬ что либо в ручном вводе, на крайний случай сделайте в интерфейсе два режима - сканер и ручной ввод, по умолчанию пусть будет сканер, если пользователь кликнет мышкой и/или нажмет на клавиатуре нужную кнопку, ожидать что это ввод с клавиатуры

[Антон Антон]

Советую отказаться от jquery и перейти на что-то более современное. Лично мне нравится vue. Там все будет получается намного проще для понимания

[glu-dimaz]

Антон Антон, как это относится к вопросу? Я вроде не просил советов о том, что лучше использовать для фронта…

[Антон Антон]

glu-dimaz, так, что код в вопросе уже запутанный. Я бы сделал в виде обработчика submit формы и всё. Тогда по энтеру будет происходить анализ и магия (клавиатурные сканеры по дефолту шлют энтер в конце, а пользователь может его нажать). Как-то так, без всякого jquery, без всякого keyup https://codepen.io/FragsterAt/pen/xbxdNMe

[glu-dimaz]

Антон Антон, submit происходит в таком случае после ввода 1/

Чем код запутан? В данным момент там простая обработка ввода и вызов функции при условиях

[Антон Антон]

glu-dimaz, после 1/ идет перевод строки? это важный момент, который не отражен в вопросе. Без него никакого submit не происходит

[Антон Антон]

glu-dimaz,

submit происходит в таком случае после ввода 1/

если ШК содержит переводы строки, то submit будет возникать после каждого перевода строки + в конце (с дефолтными настройками сканера).
Зная формат ШК можно это учесть. Это немного запутает код.

[Антон Антон]

glu-dimaz,

Чем код запутан?

Почему он вызывается после каждого отпускания кнопки? что такое searchQr(this.value); в который при таком коде передастся только 1/ (потому что после передачи слеша со сканера возникнет событие и в value будет лежать только 1/)? Если же туда передается весь ШК или его остаток после 1/, то почему?

[glu-dimaz]

Антон Антон, вам следует пополнить знания JS) код очень простой. А решается это просто - учетом интервала между событиями. Если оно меньше 0,2 секунд, то значит идет ввод со сканера и мы смело блокируем нажатие любых кнопок с клавиатуры. Все корректно работает. С задачей справляется , а это более чем достаточно. И на ручной ввод не влияет

[Антон Антон]

glu-dimaz,

Если оно меньше 0,2 секунд, то значит идет ввод со сканера и мы смело блокируем нажатие любых кнопок с клавиатуры

и где про это в вопросе?

вам следует пополнить знания JS)

а вам следует поучиться формулировать вопросы так, чтобы на них можно было ответить. например без указания этого "маленького нюансика" с блокировкой событий (которая должна быть навешена раньше, что тоже несколько усложняет - логика размазывается по разным местам выполнения) ваш код прямо нерабочий. Именно по этому возникает ощущение "запутанности", потому что код очевидно нерабочий, но у вас он работает. Но "нюансик" этот всплывает на втором десятке комментариев к вопросу. Это ненормально. Цените, что до этого дошло и старайтесь в дальнейшем формулировать вопросы так, чтобы эти "нюансики" были в самом вопросе. Из вновь зашедших пользователей не все будут читать комментарии.

[glu-dimaz]

Антон Антон, а какой нюансик - если я сидел и сам разбирался во всем в процессе решения. И по мере изучения информации оставлял комментарии. Вам необходимо было сразу в вопросе указать решение задачи в моем вопросе?

Answer 1

[Антон Антон]

Для клавиатурных сканеров есть рабочее решение https://github.com/FragsterAt/barcode_hid_reader
Отлавливает сканирование НЕ в поле ввода (специально, пусть пользователь вводит руками что нужно, если нужно изменить - то можно по энтеру или блюру анализировать содержимое), в обработчике события сканирования можно со штрихкодом делать что нужно (а можно вообще тупо свой коллбэк передать при инициализации, тогда события не будет, а будет просто вызываться функция).

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

По поводу зоопарка сканеров - клавиатурные работают +- одинаково, единственное - при доступе по RDP на медленном канале или совсем старом железе нужно немного увеличить таймаут.

Comments

[glu-dimaz]

Объясните. Зачем лишние телодвижения с 20-25 пользователями проводить? Каждому ставить ПО, настраивать и тд? Для чего?

Не проще де перехватить событие и предотвратить их выполнения. Людям в офисе за границей как настраивать? Там IT отдела нету

[Антон Антон]

glu-dimaz, я и не предлагаю что-то делать у пользователей.

[glu-dimaz]

Антон Антон, не заглядывал по ссылке думал что ПО. Сам додумался учитывать интервал между вводом символов

[Антон Антон]

glu-dimaz, тут еще решены проблемы с капслоком и раскладками (а в VIN есть буквы, так что актуально)

Answer 2

[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);
		});

Comments

[Антон Антон]

предлагаю упростить схему:
определять, что это сканер так, как сейчас. убрать выключение всплытия и стандартной обработки события.
в дебоунсовом колбэке (для уменьшения визуального мусора можно воспользоваться "библиотечным дебоунсом", например из lodash, хотя он много где есть, например для jquery есть плагин https://benalman.com/code/projects/jquery-throttle...) анализировать, что это ввод со сканера, вычленять нужные данные, заменять содержимое инпута на него и дальше продолжать обработку как надо.

также не раскрыта тема того, что такое show_stage(1) и почему обработка ввода со сканера должна вести себя не так как ввод пользователя.

условно можно представить то, что я предлагаю так:


ссылка на диаграмму https://www.plantuml.com/plantuml/uml/fLB1RjD04Btl...

можно даже два обработчика события навесить, один с определением ввода со сканера, другой - тот, что debounced (при использовании библиотечного дебоунса позволит сэкономить пару строк и сделает код чище).