fix(kiosko): bloquear campo al primer Tab del escáner + numpad más pequeño

El Tab es la señal de fin de cédula en el barcode. Al recibirlo se
activa _scannerLocked y se ignoran todos los caracteres siguientes
(apellidos, fecha, sangre) hasta que llegue Enter o se limpie el campo.
También se redujo el numpad ~10% para que entre en pantalla.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-07-23 11:22:18 -05:00
co-authored by Claude Sonnet 4.6
parent 5c02a8ea99
commit 960867d785
+16 -5
View File
@@ -391,11 +391,11 @@ unset($p);
margin: .6rem 0 1rem; margin: .6rem 0 1rem;
} }
.np-btn { .np-btn {
padding: 1rem; padding: .8rem;
font-size: 1.6rem; font-size: 1.4rem;
font-weight: 700; font-weight: 700;
border: 1.5px solid #e2e8f0; border: 1.5px solid #e2e8f0;
border-radius: 12px; border-radius: 10px;
background: #fff; background: #fff;
color: #1e293b; color: #1e293b;
cursor: pointer; cursor: pointer;
@@ -409,7 +409,7 @@ unset($p);
.np-clear { color: #ef4444; border-color: #fca5a5; } .np-clear { color: #ef4444; border-color: #fca5a5; }
.np-back { color: #64748b; } .np-back { color: #64748b; }
.np-ok { background: var(--brand); color: #fff; border-color: var(--brand); .np-ok { background: var(--brand); color: #fff; border-color: var(--brand);
font-size: 1.15rem; padding: 1.1rem; } font-size: 1rem; padding: .9rem; }
/* ── Responsive ── */ /* ── Responsive ── */
@media (min-height: 800px) { @media (min-height: 800px) {
@@ -621,14 +621,23 @@ unset($p);
}); });
// El lector casi siempre envía Enter al final → disparar de inmediato. // El lector casi siempre envía Enter al final → disparar de inmediato.
// Tab entre campos del código de barras: prevenir que el browser cambie el foco. // Tab entre campos del código de barras: prevenir foco y BLOQUEAR el campo
// (el Tab indica fin de la cédula — todo lo que sigue es apellido/fecha/etc).
let _scannerLocked = false;
_inpCedula.addEventListener('keydown', (e) => { _inpCedula.addEventListener('keydown', (e) => {
if (e.key === 'Tab') { if (e.key === 'Tab') {
e.preventDefault(); e.preventDefault();
// Si ya tenemos dígitos válidos, bloquear el campo aquí mismo
if (/^\d{5,15}$/.test(_inpCedula.value.trim())) _scannerLocked = true;
return;
}
if (_scannerLocked && e.key.length === 1) {
e.preventDefault(); // ignorar todo lo que llega después del primer Tab
return; return;
} }
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
_scannerLocked = false;
const val = _inpCedula.value.trim(); const val = _inpCedula.value.trim();
if (/^\d{5,15}$/.test(val)) confirmarTurno(); if (/^\d{5,15}$/.test(val)) confirmarTurno();
} }
@@ -681,6 +690,7 @@ unset($p);
const inpCedula = document.getElementById('inp-cedula'); const inpCedula = document.getElementById('inp-cedula');
inpCedula.focus(); inpCedula.focus();
inpCedula.value = ''; inpCedula.value = '';
_scannerLocked = false;
_keyTimes = []; _keyTimes = [];
clearTimeout(_timerRafaga); clearTimeout(_timerRafaga);
resetInactividad(); resetInactividad();
@@ -766,6 +776,7 @@ unset($p);
confirmarTurno(); confirmarTurno();
return; return;
} else if (k === 'C') { } else if (k === 'C') {
_scannerLocked = false;
inp.value = ''; inp.value = '';
} else if (k === '⌫') { } else if (k === '⌫') {
inp.value = inp.value.slice(0, -1); inp.value = inp.value.slice(0, -1);